axios攔截器配合element ui實現http請求的全局加載

 

輝夜真是太可愛啦 關注

2019.04.29 13:26 字數 66 閱讀 2評論 0喜歡 0

首先，在main.js中引入axios以及Loading

import {Loading} from 'element-ui' import axios from "axios"; 

定義一個開啟以及關閉的方法

let loading; function startLoading() { //使用Element loading-start 方法 loading = Loading.service({ lock: true, text: '拼命加載中...', }) } function endLoading() { //使用Element loading-close 方法 loading.close() } 

在請求的時候開啟菊花loading

//請求數據攔截器 axios.interceptors.request.use(request => { startLoading(); return request }, err => { return Promise.reject(err); }); 

在接收response的時候關閉菊花loading，並且對錯誤的狀態碼進行一定的處理

//接收響應攔截器 axios.interceptors.response.use(response => { endLoading(); return response }, err => { if (err && err.response) { switch (err.response.status) { case 400: err.message = '請求錯誤(400)'; break; case 401: this.$router.push('/login'); break; case 403: err.message = '拒絕訪問(403)'; break; case 404: err.message = '請求出錯(404)'; break; case 408: err.message = '請求超時(408)'; break; case 500: err.message = '服務器錯誤(500)'; break; case 501: err.message = '服務未實現(501)'; break; case 502: err.message = '網絡錯誤(502)'; break; case 503: err.message = '服務不可用(503)'; break; case 504: err.message = '網絡超時(504)'; break; case 505: err.message = 'HTTP版本不受支持(505)'; break; default: err.message = `連接出錯(${err.response.status})!`; } } else { err.message = '連接服務器失敗!' } message.error(err.message); return Promise.reject(err); }); 

小禮物走一走，來簡書關注我