axois 的封裝
// 安裝axios
npm install axios;
// 引入
import axois from 'axios'; // 引入axois模組
import QS from 'qs'; // 引入qs模組，用來序列化post型別資料
複製程式碼- 環境切換
// 環境切換
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = 'http://www.baidu.com';
} else if (process.env.NODE_ENV === 'debug') {
axios.defaults.baseURL = 'http://www.ceshi.com';
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL === 'http://www.procduction';
}
複製程式碼- 設定請求超時
axios.defaults.timeout = 10000; // 請求超過10s，告知使用者請求超時
複製程式碼- post請求頭
- post請求的時候，需要加上一個請求頭，所以可是設定一個預設設定，即post請求頭如下
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; chartset=UTF-8';
複製程式碼攔截請求
- 我們在進行請求前可以進行一個請求的攔截，比如有且請求是登入之後才能訪問的，或者是post請求的時候，我們需要序列化資料，這時候就需要在傳送請求之前進行一個攔截。
request請求攔截
// 先匯入vuex，因為要使用裡面的狀態物件
// vuex的路徑
import store from '@/store/index';
// 請求攔截
axios.interceptors.request.use(
config => {
// 每次傳送請求之前重新整理vuex中是否存在token
// 如果存在，則統一在http的請求頭header中新增token，後臺根據token判斷登入情況
// 即使本地存在token,token也可能是過期的，所以響應請求中，要對返回的裝填進行判斷
const token = store.state.token;
token&&(config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
},
);
複製程式碼- 一般登入完成之後，將使用者的token通過localStorage或者cookie存在本地，然後在每次進入頁面的時候，（即在main.js中），會首先從本地儲存中讀取token,如果token存在，說明使用者登入過，則更新vuex中token的狀態，然後在每次請求的時候在header中帶token.
response 響應攔截
// 響應攔截
axios.interceptors.response.use(
response => {
// 如果狀態碼為200，介面請求成功，否則丟擲錯誤
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 可以跟後臺的開發人員，協商好統一的錯誤狀態碼
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登入，跳轉到登入頁面
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
case 403:
/**
* 提示登入過期
*/
// 清除localStorage中的token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳轉到登入頁面，並要瀏覽頁面的fullPath傳過去，登入成功後需要訪問的頁面
setTimout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRpute.fullPath;
}
});
}, 1000);
break;
case 404:
/**
* 提示請求頁面不存在
*/
break;
default:
/**
* 丟擲錯誤異常，
*/
}
return Promise.reject(error.response);
}
},
);
複製程式碼- 封裝get
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data);
});
});
}
複製程式碼- 封裝post請求
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data);
});
});
}
複製程式碼axios.get()方法和axios.post() 在提交引數的時候寫法是不同的，get的第二個引數是一個{}， 然後這個物件的params還是一個物件，而post的第二個引數就是一個引數物件，兩者略有差別