VUE3项目学习系列--Axios二次封装（五）

马达加斯加の季风

已于 2024-03-12 00:07:13 修改

阅读量1.5k

点赞数 8

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue3 mock axios

于 2024-03-12 00:05:32 首次发布

本文链接：https://blog.youkuaiyun.com/CONSOLE11/article/details/136611186

本文介绍了如何在Vue项目中使用Axios进行网络请求的封装，包括创建axios实例、添加请求和响应拦截器，以及如何配置mock接口进行本地测试。重点展示了如何在服务端和客户端使用Axios，并演示了mock接口的安装和配置过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Axios中文文档 | Axios中文网 (axios-http.cn)

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。在项目中进行二次封装的主要目的是为了使用其请求与响应的拦截处理。

1、依赖安装

pnpm install axios

2、配置

在src根目录下创建utils/request.ts，详细配置参考axios官网

// 进行axios二次封装，使用请求与响应拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 1、创建axios实例
const instance = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 1000,
    headers: { 'X-Custom-Header': 'foobar' }
});

// 2、添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 3、添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的

最低0.47元/天解锁文章