Vue中axios拦截器怎么使用

 第一步：在src中创建utils文件夹  并新建一个request.js文件

import axios from 'axios'
const instance = axios.create();
 
// 添加请求拦截器 
instance.interceptors.request.use(function (config) { 
// 在发送请求之前做些什么 
config.params.admin_id = 1//这个数据是写死的 可以从本地存储读取
return config;
}, function (error) {  
// 对请求错误做些什么 
 return Promise.reject(error); 
});
 
// 添加响应拦截器 
instance.interceptors.response.use(function (response) { 
// 2xx 范围内的状态码都会触发该函数
// 对响应数据做点什么 
console.log(response)
let {data} = response
if(data.code == 1){
    // 成功
}else{
   alert("失败")
}
return response; 
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。 
// 对响应错误做点什么
 return Promise.reject(error); 
});
 
 
export default instance

第二步 ：在src/api/Home.js封装接口 引入该组件

import request  from '../utils/request'
 
export const miens =()=>{
 
     return new Promise ((resolve)=>{
 
        request({
 
            url:"/webapi/index/index",
 
            method:"post",
 
            params:{},
 
        }).then((res)=>{
 
            resolve(res);
 
        });
 
        });
 
     };

注：把axios 换成 request 这一步就操作完成了

原创作者：吴小糖

创作时间：2023.10.13