Axios请求（对于ajax的二次封装）——Axios请求的响应结构、默认配置

知识回调（不懂就看这儿！）

知识专栏	专栏链接
Axios知识专栏	https://blog.csdn.net/xsl_hr/category_12287421.html?spm=1001.2014.3001.5482
axios起步——介绍和使用 post请求	https://blog.csdn.net/XSL_HR/article/details/130141944
Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构	https://blog.csdn.net/XSL_HR/article/details/130159746

有关Axios的相关知识可以前往Axios知识专栏查看复习！！

场景复现

最近学习与前端相关的小程序时，接触了异步请求api的封装和实现，涉及到了很多底层的基础知识，比如ajax和axios工具，因此计划用两个专栏来系统的学习关于axios和ajax的实用知识。
本期文章将重点介绍Axios请求的响应结构、默认配置。

核心干货

axios官方中文文档：https://axios-http.com/zh/
ajax文档：https://www.runoob.com/ajax/ajax-tutorial.html

axios请求的响应结构

响应格式详解

一个请求的完整响应包含以下信息：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 是服务器响应头
  // 所有的 header 名称都是小写，而且可以使用方括号语法访问
  // 例如: `response.headers['content-type']`
  headers: {},

  // `config` 是 `axios` 请求的配置信息
  config: {},

  // `request` 是生成此响应的请求
  // 在node.js中它是最后一个ClientRequest实例 (in redirects)，
  // 在浏览器中则是 XMLHttpRequest 实例
  request: {}
}

当我们使用.then时，将会接收如下响应：

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

当我们使用 catch，或者传递一个rejection callback作为 then 的第二个参数时，响应可以通过 error 对象被使用。（后期会在错误处理部分详细介绍）

实际请求中的响应格式

当我们发起网络请求之后，浏览器的控制台中的网络面板会显示请求的状态。比如请求的状态和状态码，请求响应头的内容等等。

axios请求的默认配置

对于默认配置，我们可以指定默认配置，它将作用域每个请求。

全局axios默认值（了解）

// 设置默认的API地址
axios.defaults.baseURL = 'https://api.example.com'; 
// 设置所有的请求都会带上一个名为'Authorization'的HTTP头部 并且该头部值为AUTH_TOKEN变量所代表的内容
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// 设置POST请求时默认使用'application/x-www-form-urlencoded'格式来编码数据
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

自定义实例默认值在实际开发中的使用

const request = axios.create({
    baseURL: '/store', // url = base url + request url
    timeout: 360000
    // withCredentials: true // send cookies when cross-domain requests
})
// Request interceptors
request.interceptors.request.use(
    (response) => {
        NProgressE.start()
        const satoken = localStorage.getItem('token')
        if (satoken !== '') {
            response.headers['token'] = satoken
        }
        return response
    },
    (error) => {
        NProgressE.error(true);
        Promise.reject(error)
    }
)

// Response interceptors
request.interceptors.response.use(
    (response) => {
        NProgressE.done(false)
        return response
    },
    (error) => {
        NProgressE.error(true);
        message.error(error.message)
        return Promise.reject(error)
    }
)

配置的优先级

配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。下面有一个例子：

/ 使用库提供的默认配置创建实例
// 此时超时配置的默认值是 `0`
const instance = axios.create();

// 重写库的超时默认值
// 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
instance.defaults.timeout = 2500;

// 重写此请求的超时时间，因为该请求需要很长时间
instance.get('/longRequest', {
  timeout: 5000
});

---

以上就是关于与axios请求相关的axios API、axios实例、axios请求配置的分享，相信看完这篇文章的小伙伴们一定有了一定的收获。当然，可能有不足的地方，欢迎大家在评论区留言指正！

下期文章将介绍axios拦截器的相关内容 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~