vue中axios的二次封裝

阿新 • • 發佈：2021-01-14

vue中axios的二次封裝

封裝

src目錄下新建 api 資料夾
api資料夾下新建 http.js 檔案

import axios from "axios"
import qs from "qs"		// 這是前端的一個js庫，不清楚的百度

// 根據環境變數區分介面的預設地址
// switch(process.env.NODE_ENV) {
//   case "production": 
//     axios.defaults.baseURL = "";
//     break; 

//   case "test":
//     axios.defaults.baseURL = "";
//     break;
//   default: 
//     axios.defaults.baseURL = ""
// }
axios.defaults.baseURL = "/api"  // 我這裡是解決了一下跨域，不清楚的看我之前的部落格，怎樣解決跨域
// 設定超時時間和跨域是否允許攜帶憑證
axios.defaults.timeout = 10 * 1000;
// axios.defaults.withCredentials = true; 

// 設定請求傳遞資料的格式(看伺服器要求怎麼寫)
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data => qs.stringify(data);

// 設定請求攔截器
// 客戶端傳送請求 -> [請求攔截器] -> 伺服器
// TOKEN校驗 接收伺服器返回的token 儲存到vuex/本地儲存中 每一次向伺服器發請求，我們應該把token帶上
axios.interceptors.request.use( 
config => {
	// 攜帶上token
	let token = localStorage.getItem('token');
	token && (config.headers.Authorization = token);
	return config;
},error => {
		return Promise.reject(error)
});
// 設定響應攔截器
// 伺服器返回資訊 -> [攔截的統一處理] ->客戶端js獲取資訊
axios.interceptors.response.use(response => {
    // 返回資料
	return response.data;
},error => {
	let { response } = error;
	if(response){
		// 伺服器最起碼返回了結果
        // 具體還是和後端商量好
		switch(response.status) {
			case 401:		// =>許可權
				break;
			case 403:		// =>伺服器拒絕執行（token過期）
				break;
			case 404:		// =>找不到頁面
				break;
		}
	} else {
		// 伺服器連結果都沒有
		if(!window.navigator.onLine) {
			// 這裡可以斷網處理：可以跳轉到斷網頁面
			return;
		}
		return Promise.reject(error);
	}
});

export default axios;

根據環境變數區分介面的預設地址在package.json檔案裡配置

像test和production可以自己定義，並不是一定叫這個。

平常我們跑專案都是

npm run serve

我們配置好了以後可以這樣，這樣就可以呼叫不同的baseUrl，來區分測試環境，生產環境，開發環境

npm run serve:test

npm run serve:production

"scripts": {
    "serve": "vue-cli-service serve",
    "serve:test": "set NODE_ENV=test&&vue-cli-service serve",
    "serve:production": "set NODE_ENV=production&&vue-cli-service serve",
    "build": "vue-cli-service build"
  },

這樣就封裝好了

使用

哪裡需要哪裡使用，我個人的習慣如下。

場景：index首頁需要請求資料

api資料夾下新建index.js

// 首頁網路請求相關方法
import axios from "./http";
function Creative() {
  return axios.get("/beibei/Creative");
}
function Cases(id,num) {
  return axios.get(`/beibei/Cases?id=${id}&num=${num}`);
}
function Dynamic(data) {
  return axios.post("/beibei/Dynamic",data);
}
export default {
  Creative,
  Cases,
  Dynamic,
};

api資料夾下新建api.js

// 這裡是資料請求的唯一路口
// 匯入請求
// 首頁
import Dynamic from "./index";
import Creative from "./index";
import Cases from "./index";
export default {
  // 首頁介面
  Creative,
  Cases,
  Dynamic,
}

在src目錄下的main.js中掛載

// 將 api 唯一路口檔案匯入，掛載到原型
import api from "./api/api"; 
Vue.prototype.$api = api;

在index.vue中使用

<template></template>
<script>
  export default {
    name: 'index',
    created() {
      this._Cases(1,1);
      this._Creative();
    },
    methods: {
      _Cases(id,num) {
        this.$api.Cases.Cases(id,num).then(res => {
          console.log(res)
        })
      },
      _Creative() {
        this.$api.Creative.Creative().then(res => {
          console.log(res)
        })
      },
      _Dynamic(data) {
        this.$api.Dynamic.Dynamic(data).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>
<style></style>

axios如何解決跨域看我另一篇部落格如何解決vue專案(cli3以上)中的跨域問題(axios版)