axios网络请求封装

可洛不甜

已于 2023-07-09 16:51:46 修改

阅读量155

点赞数

文章标签：前端 javascript css3 html5

于 2023-07-09 16:46:35 首次发布

本文链接：https://blog.csdn.net/lllsadsa/article/details/131624399

版权

该文章讲述了如何使用JavaScript库axios进行HTTP请求的封装，特别是在请求头中设置token，并通过拦截器管理请求和响应，以便于后期的修改和维护。登录时保存的token从本地存储读取，用于授权。

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

先封装一个总路径 js 文件

封装请求

创建 axios 对象并在请求头设置 token

设置请求拦截器

设置请求方式

导出组件

根据接口再次封装请求

方便后期修改/维护

使用封装好的请求组件

不需要token

需要 token ( token 在登录时已经存入本地存储）
传 token 的方法请返回到前面（创建 axios 对象并在请求头设置 token）
请求拦截器代码：

// 添加请求拦截器
location.interceptors.request.use(
  function (config) {
    // 在请求前做一些事情
    config.headers.token = getToken(); // 在请求头中设置 token
    return config;
  },
  function (error) {
    // 错误时返回的数据
    return Promise.reject(error);
  }
);

// 添加响应拦截器
location.interceptors.response.use(
  function (response) {
    //位于2xx范围内的任何状态代码都会导致此函数触发/处理响应数据
    return response.data;
  },
  function (error) {
    // 任何不在2xx范围内的状态代码，导致此函数触发/做一些响应错误的事情。
    return Promise.reject(error);
  }
);