生活随笔
收集整理的這篇文章主要介紹了
axios请求拦截 做Loading加载
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
axios請求攔截 做Loading加載
首先安裝element-ui ，我們是按需引入
從element-ui 引入我們所需：
import {Loading,Message} from "element-ui";
const instance = axios.create({baseURL: 'https://api.it120.cc',//設(shè)置axios為form-dataheaders:{'Content-Type':'application/x-www-form-urlencoded'},transformRequest:[function (data) {let ret = '';for (let it in data) {ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'}return ret}]
});
//創(chuàng)建loading實(shí)例
var loading = null;
// 添加請求攔截器
instance.interceptors.request.use(function (config) {loading = Loading.service({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});return config;
}, function (error) {// 對請求錯(cuò)誤做些什么Message(error);console.log("========>",error);return Promise.reject(error);
});// 添加響應(yīng)攔截器
instance.interceptors.response.use(function (response) {// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么setTimeout(() => {loading.close();}, 2000);return response;
}, function (error) {// 對響應(yīng)錯(cuò)誤做點(diǎn)什么Message(error);console.log("========>",error);return Promise.reject(error);
});
總結(jié)
以上是生活随笔為你收集整理的axios请求拦截 做Loading加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
