Axios 二次封装

颜箴

已于 2022-06-08 17:59:43 修改

阅读量5.5k

点赞数

文章标签： vue.js javascript ecmascript

于 2022-06-08 16:59:45 首次发布

原文链接：https://www.cnblogs.com/bulu08042/p/16225400.html

版权

本文介绍了如何使用axios进行二次封装，以适应项目中不同功能模块的请求配置需求。通过axios.create()创建具有特定配置的实例，并利用拦截器处理请求和响应。同时，讲解了如何设置全局headers以简化token管理，以及在服务器端识别Ajax请求的方法。

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

1. 项目中对 axios 进行了二次封装，使用到了以下几个API：

axios.create([config])：创建一个新的axios

axios.interceptors.request.use(config=>{}, error=>{})：添加请求拦截器

axios.interceptors.response.use(response=>{}, error=>{})：添加响应拦截器

2. axios.create(config) 对axios请求进行二次封装

- 项目业务根据不同的功能模块划分为不同的 url 前缀等等，我们就可以根据功能模块配置不同的 axios 配置。

根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置

- 新的 axios 只是没有取消请求和批量请求的方法，其它所有语法都是一致的

- 为什么要这种语法？

需求：项目中有部分接口需要的配置与另一部分接口的配置不太一样

解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

一般是axios.create()中的baseURL、 request的第一个函数config、 response的第一个函数response 这三者不同。

axios.create({
  baseURL: 'http://localhost:3000', // url = base url + request url
  timeout: 20000 // request timeout
})

// 二次封装 axios 的文件 request.js
import axios from "axios";
const service = axios.create({
  baseURL: '',
});
// 请求拦截器
service.interceptors.request.use(
  config => {},
  error => {}
);
// 响应拦截器
service.interceptors.response.use(
  response => {},
  error => {}
);
export default service;


// api 文件引入 request.js
import request from './request';
request({
    url: "/person/detail?id=" + id,
    method: "get",
});

用axios请求，接口返回的参数是data里面的，但是实际返回了很多config、header等参数：

这些都不需要。可以通过配置拦截器拦截：

3. axios设置全局headers

每次请求的时候都要设置 token 为 headers，非常不方便，因此我们可以设置一个全局headers，每次请求的时候就不用再设置token了：

 axios.interceptors.request.use(config => {
    config.headers.Authorization = `Bearer ${token}`
 })
 
config.headers["X-Requested-With"] = "XMLHttpRequest"; // 增加ajax请求标识，方便后台数据处理

在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)：

两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数：

x-requested-with 请求头：区分ajax请求还是普通请求

转载自：Axios 二次封装 - 我就尝一口 - 博客园