1.為什么一定要封裝呢不是直接向ajax一樣直接使用呢, 原因如下
1.每家公司都會(huì)去云服務(wù)器注冊(cè)他們自己的域名這里不管是一級(jí)域名還是二級(jí)域名,axios提供的請(qǐng)求攔截器再加上我們項(xiàng)目的環(huán)境變量可靈活多變的在所有請(qǐng)求上面加上公司 的域名簡(jiǎn)直不要太爽哦。
2.如果你們接手過項(xiàng)目很多什么c端b端。后臺(tái)接口respons返回的難道你要一個(gè)個(gè)處理嗎。當(dāng)時(shí)不是，所有接口請(qǐng)求成功之前都要過你這個(gè)攔截器，axios為我們提供了響應(yīng) 攔截器。異常統(tǒng)一處理,只需要判斷HTTP狀態(tài)碼即可。一個(gè)字爽
3.封裝請(qǐng)求方法get post, put, delte。為你打開方便大門配合async 和await
// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數(shù)據(jù)，后面會(huì)提到
// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改。
import { Toast } from 'vant';
axios.defaults.timeout = 10000; //通過axios.defaults.timeout設(shè)置默認(rèn)的請(qǐng)求超時(shí)時(shí)間。例如超過了10s，就會(huì)告知用戶當(dāng)前請(qǐng)求超時(shí)，請(qǐng)刷新等。
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //設(shè)置post請(qǐng)求頭
// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象
// vuex的路徑根據(jù)自己的路徑去寫
import store from '@/store/index';
// 請(qǐng)求攔截器
axios.interceptors.request.use(
config => {
// 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token
// 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
// 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
// 響應(yīng)攔截器
axios.interceptors.response.use(
response => {
// 如果返回的狀態(tài)碼為200，說明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù)
// 否則的話拋出錯(cuò)誤
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服務(wù)器狀態(tài)碼不是2開頭的的情況
// 這里可以跟你們的后臺(tái)開發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼
// 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示，錯(cuò)誤提示等等
// 下面列舉幾個(gè)常見的操作，其他需求可自行擴(kuò)展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登錄
// 未登錄則跳轉(zhuǎn)登錄頁(yè)面，并攜帶當(dāng)前頁(yè)面的路徑
// 在登錄成功后返回當(dāng)前頁(yè)面，這一步需要在登錄頁(yè)操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token過期
// 登錄過期對(duì)用戶進(jìn)行提示
// 清除本地token和清空vuex中token對(duì)象
// 跳轉(zhuǎn)登錄頁(yè)面
case 403:
Toast({
message: '登錄過期，請(qǐng)重新登錄',
duration: 1000,
forbidClick: true });
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳轉(zhuǎn)登錄頁(yè)面，并將要瀏覽的頁(yè)面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁(yè)面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404請(qǐng)求不存在
case 404:
Toast({
message: '網(wǎng)絡(luò)請(qǐng)求不存在',
duration: 1500,
forbidClick: true });
break;
// 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true });
}
return Promise.reject(error.response);
}
}
});
/**
這里封裝請(qǐng)求方法可根據(jù)個(gè)人喜好來填
* get方法，對(duì)應(yīng)get請(qǐng)求
* @param {String} url [請(qǐng)求的url地址]
* @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
*/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)
})
});
/**
* 封裝get方法
* @param url
* @param data
* @returns {Promise}
*/
export function fetch(url,params={}){
return new Promise((resolve,reject) => {
axios.get(url,{
params:params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封裝post請(qǐng)求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url,data = {}){
return new Promise((resolve,reject) => {
axios.post(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封裝patch請(qǐng)求
* @param url
* @param data
* @returns {Promise}
*/
export function patch(url,data = {}){
return new Promise((resolve,reject) => {
axios.patch(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
/**
* 封裝put請(qǐng)求
* @param url
* @param data
* @returns {Promise}
*/
export function put(url,data = {}){
return new Promise((resolve,reject) => {
axios.put(url,data)
.then(response => {
resolve(response.data);
},err => {
reject(err)
})
})
}
