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 二次封装 - 我就尝一口 - 博客园

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐