在http.js文件中
/**axios封裝
* 請求攔截、相應(yīng)攔截、錯誤統(tǒng)一處理
*/
import axios from 'axios';
import QS from 'qs';
import {getCookie}from './util'
import {message, Modal }from 'ant-design-vue'
// message的基礎(chǔ)配置
message.config({
duration:2,// 提示時常單位為s
? top:'200px',// 距離頂部的位置
? maxCount:3 // 最多顯示提示信息條數(shù)(后面的會替換前面的提示)
})
// 請求超時時間
axios.defaults.timeout = 10000;
axios.defaults.headers.common['Authorization'] =?getCookie(token);
// post請求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
// 請求攔截器
axios.interceptors.request.use(? ?
? ? config => {
? ? ? ? return config;? ?
? ? },? ?
? ? error => {? ? ? ?
? ? ? ? return Promise.error(error);? ?
? ? })
// 響應(yīng)攔截器
axios.interceptors.response.use(? ?
? ? response => {? ? ? ?
? ? ? ? if (response.status === 200) {? ? ? ? ? ?
? ? ? ? ? ? return Promise.resolve(response);? ? ? ?
? ? ? ? } else {? ? ? ? ? ?
? ? ? ? ? ? return Promise.reject(response);? ? ? ?
? ? ? ? }? ?
? ? },
? ? // 服務(wù)器狀態(tài)碼不是200的情況? ?
? ? error => {? ? ? ?
? ? ? ? if (error.response.status) {? //服務(wù)器狀態(tài)碼的異常
? ? ? ? ? ? switch (error.response.status) {?
? ? ? ? ? ? ?// 403 token過期
?????????????????case 403:? ? ??
????????????????????????message.error('登錄過期，請重新登錄') ;
? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? // 404請求不存在? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? case 404:? ? ??
?????????????????????message.error('網(wǎng)絡(luò)請求不存在');
? ? ? ? ? ? ? ? break;? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? // 其他錯誤，直接拋出錯誤提示? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? default:??
?????????????????????message.error(error.response.data.errMsg) ;
? ? ? ? ? ? }? ? ? ? ? ?
? ? ? ? ? ? return Promise.reject(error.response);? ? ? ?
? ? ? ? }? ? ?
? ? }
);
/**
* get方法，對應(yīng)get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
export function get(url, params){? ?
? ? return new Promise((resolve, reject) =>{? ? ? ?
? ? ? ? axios.get(url, {? ? ? ? ? ?
? ? ? ? ? ? params: params? ? ? ?
? ? ? ? })? ? ? ?
? ? ? ? .then(res => {? ? ? ? ? ?
????????????????if(response.data.code ==401 || response.data.code ==10003){? //業(yè)務(wù)代碼中的異常
????????????????????message.error(response.data.errorMsg);
????????????????????setTimeout(function () {
????????????????????????????window.location.href='./login'? //error
? ????????????????????},3000)
????????????????}
? ? ? ? ? ? resolve(res.data);? ? ? ?
? ? ? ? })? ? ? ?
? ? ? ? .catch(err => {? ? ? ? ? ?
? ? ? ? ? ? reject(err.data)? ? ? ?
? ? ? ? })? ?
? ? });
}
message的提示框，如圖，沒有遮罩層，只有提示語!? 我選的error 的icon，另外還有success，warnimg和 info? ，圖標(biāo)各不相同！
?this.$message.success('This is a success message');
?this.$message.error('This is an error message');
?this.$message.warning('This is a warning message');
?this.$message.info('This is a normal message');
/**
* post方法，對應(yīng)post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數(shù)]
*/
export function post(url, params) {? ?
? ? return new Promise((resolve, reject) => {? ? ? ?
? ? ? ? axios.post(url, QS.stringify(params))? ? ? ?
? ? ? ? .then(res => {
????????????????if(response.data.code ==401? ||? response.data.code ==10003){
????????????????????????Modal.warning({
????????????????????????????title:response.data.errorMsg,
????????????????????????????okText:'確認(rèn)',// 設(shè)置按鈕內(nèi)容，默認(rèn)為 OK
? ? ? ? ? ? ? ? ? ? ? ? ? ? onOk: () => {// 點擊確認(rèn)后的回調(diào)
? ????????????????????????????? window.location.href='./login' //error
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
????????????????????????})
????????????????}
? ? ? ? ? ? resolve(res.data);? ? ? ?
? ? ? ? })? ? ? ?
? ? ? ? .catch(err => {? ? ? ? ? ?
? ? ? ? ? ? reject(err.data)? ? ? ?
? ? ? ? })? ?
? ? });
}
model 提示框，有遮罩層，有確定按鈕，也可以有取消按鈕。icon也有?success??error? ?warning??info 幾種情況
