這次帶給大家vue axios製作登入要求攔截，vue axios製作登入要求攔截的注意事項有哪些，以下就是實戰案例，一起來看一下。
當我們在做介面請求時，例如判斷登入逾時時候，通常是介面回傳一個特定的錯誤碼，那如果我們每個介面都去判斷一個耗時耗力，這個時候我們可以用攔截器去進行統一的http請求攔截。
1.安裝設定 axios
cnpm install --save axios
我們可以建立一個js檔案來做這個統一的處理，新建一個axios.js，如下
import axios from 'axios'
import { Indicator } from 'mint-ui';
import { Toast } from 'mint-ui';
// http request 拦截器
axios.interceptors.request.use(
config => {
Indicator.open()
return config;
},
err => {
Indicator.close()
return Promise.reject(err);
});
// http response 拦截器
axios.interceptors.response.use(
response => {
Indicator.close()
return response;
},
error => {
Indicator.close()
});
export default axios然後在main.js中引入這個js檔案
import axios from './axio'; Vue.prototype.$axios = axios;
這樣就可以使用axios去請求了，在元件中可以用this.axios去調用
this.$axios({
url:requestUrl+'homePage/v1/indexNewPropertiesResult',
method:'POST',
}).then(function(response){ //接口返回数据
console.log(response)
that.modulesArr=response.data.data.modules;
// that.getRecommendGoods(0);
});只有用axios請求接口，才能去攔截，現在已經能在axios.js中攔截到了，可以在兩個狀態中做你需要的操作
補充：
axios使用攔截器統一處理所有的http請求
axios使用攔截器
在請求或回應被then 或catch 處理前攔截它們。
•http request攔截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});•http respones攔截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});##•移除攔截器
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);•為自訂axios實例添加攔截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});以上是vue+axios製作登入請求攔截的詳細內容。更多資訊請關注PHP中文網其他相關文章！
