Vue2-请求拦截器+响应拦截器

AfeiyuO

已于 2023-01-02 16:48:20 修改

阅读量637

点赞数

分类专栏：前端文章标签：前端 vue.js

于 2023-01-02 16:18:46 首次发布

本文链接：https://blog.csdn.net/AfeiyuO/article/details/128487625

版权

本文介绍了如何在 Vue2 中设置请求拦截器和响应拦截器，通过讲解request.js和api.js文件的配置，并在页面中引入及使用。最后讨论了拦截器的执行顺序。鼓励前端开发者尝试实践。

摘要由CSDN通过智能技术生成

request.js 文件

import axios from "axios";

// 创建实例
const instance = axios.create({
    baseURL:'http://.......',
    timeout:10000
})
// 请求拦截器
instance.interceptors.request.use((config)=>{
    console.log('111')
    return config;
},err=>{
    return Promise.reject(err)
});
// 响应拦截器
instance.interceptors.response.use(res=>{
    console.log('222')
    return res.data;
},err=>{
    return Promise.reject(err)
})

// 导出实例
export default instance

api.js 文件

import instance from "./request";

// 验证码请求
export const GetCaptchacodeApi = ()=>instance.get("****接口****")
// 发起登录请求 param结束接口参数  
export const LoginApi = (param)=>instance.post("****接口****",para