Axios使用总结

特点

• 浏览器生成XMLHttpRequests
• node使用http发送请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 自动数据对象序列化为multipart/form-data 和 x-www-form-urlencoded body encodings
• 客户端支持防御 XSRF

使用方法 （三种）

注意：这里的三种仅仅是常用的三种，axios配置比较灵活，所以一些简写或者其他写法文章并未涉及到

方法一：通过 axios API直接请求 (两种语法形式)

单独使用axios API，将相关配置（config： 参考下面的“请求配置”）传递给axios发出请求

语法1： axios(config);

import axios from 'axios';

axios({
  url: '/user/test',
  method: 'post',
  data: {
     firstName: 'Fred',
    lastName: 'Flintstone',
  },
});

语法2： axios(url[, config]); 方括号表示括号的内容可选

注意：这里如果config中也设置了url，那么config中的url会被外层的url给覆盖。

import axios from 'axios';

axios('/user/test', {
  url: '/user/inner', // 会被覆盖，无效设置
  method: 'post',
  data: {
     firstName: 'Fred',
     lastName: 'Flintstone',
  },
});

方法二： axios方法别名

axios.request(config);

axios.get(url [, config]);

axios.delete(url [, config]);

axios.head(url [, config]);

axios.options(url [, config]);

axios.post(url [, data [, config]]);

axios.put(url [, data [, config]]);

axios.patch(url [, data [, config]]);

注意：当使用方法别名时，url、method、data属性不需要在config中指定。(定义了也会无效)

import axios from 'axios';

axios.post('/user/test', {
     firstName: 'Fred',
     lastName: 'Flintstone',
});

import axios from 'axios';

axios.post('/user/test', 
  {
    firstName: 'Fred',
    lastName: 'Flintstone',
  },
  {
    headers: {
        'Content-Type': 'multipart/form-data',
    },
  },
);

方法三： 创建axios实例

实例方法

instance.request(config);

instance.get(url [, config]);

instance.delete(url [, config]);

instance.head(url [, config]);

instance.options(url [, config]);

instance.post(url [, data [, config]]);

instance.put(url [, data [, config]]);

instance.patch(url [, data [, config]]);

instance.getUri(config);

注意: config合并时是类似Object.assign()的覆盖，而不是整个覆盖，见下方代码注释的分析

import axios from 'axios';


const instance = axios.create({
    headers: { 'X-Custom-Header': 'foobar', 'Content-Type': 'multipart/form-data',},
  });

instance.post(
    'https://httpbin.org/post',
    { bar: 456 },
    {
      headers: {
        'X-Custom-Header': 'test', // 会覆盖instance最初定义时设置的headers
      },
      // 最终的headers:
      // headers: {
      //   'X-Custom-Header': 'test',
      //   'Content-Type': 'multipart/form-data',
      // },
      // 由此可以看出是类似Object.assign的覆盖，而不是直接 = 的覆盖
      // 如果是直接 = 的覆盖那最终headers应该是
      // headers: {
      //   'X-Custom-Header': 'test',
      // },
    },
);

请求配置 （config）

以下是发出请求时的可用配置项，仅url是必须的（required），如未指定method，请求方法将默认为get方法。

相关概念

plain object

可以理解为通过 { } 定义或者 new Object 创建的对象；

主要是为了区别于其他的，使用typeof也返回 “Object” 的类型，如null、数组等；

URLSearchParams

MDN: URLSearchParams

URLSearchParams接口定义了处理URL查询字符串的公用方法。

可直接通过构造函数URLSearchParams(), new一个URLSearchParams类型的数据:

URLSearchParams包含：

一个实例属性：size;

多个实例方法：迭代器[@@iterator] 、append、delete 、 entries、 forEach、 get、 getAll、 has、 keys 、set等。

参考链接

github.com/axios/axios

以上内容如有问题，望多多指正！

原文链接：https://juejin.cn/post/7356867483829141513 作者：拾光精品