Vue 请求/响应拦截器

最新推荐文章于 2024-08-19 11:35:22 发布

最凶残的小海豹

最新推荐文章于 2024-08-19 11:35:22 发布

阅读量190

点赞数

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

本文链接：https://blog.csdn.net/qq_17627195/article/details/121007512

版权

web前端专栏收录该内容

206 篇文章 12 订阅

订阅专栏

该博客介绍了如何在Vue项目中配置和使用axios库。通过设置默认基础URL、添加请求和响应拦截器，实现了统一处理请求和错误信息的功能。配置文件（config.js）中，设置axios的基础URL为'http://www.test.com'，并添加了请求和响应拦截器进行预处理和错误处理。

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

作用：统一配置请求和处理错误信息

安装和使用axios就不用说了，可以看下面文章
vue安装使用axios

直接在配置/引入 axios 的地方，加入如下代码：

一般情况下我是单独将下列代码放在一个配置文件，然后在需要引入的地方引入这个配置文件

需要引入配置文件的情况：

import axios from 'axios'
import './api/config'

配置文件代码：(文件名：config.js)

import axios from 'axios';
 
// 配置默认的host
axios.defaults.baseURL = 'http://www.test.com';
 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
	// 在发送请求之前要做的处理
    return config;
}, function (error) {
	// 对请求错误情况的处理
	return Promise.reject(error);
});
 
// 添加响应拦截器
axios.interceptors.response.use(function (res) {
    // 对响应数据的处理
    return res;
}, function (error) {
    // 对响应错误情况的处理
    return Promise.reject(error);
});