vue axios封裝,全局錯誤處理,使用ant-design-vue的message和model提示

在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 幾種情況

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容