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请求（对于ajax的二次封装）——Axios拦截器与错误处理	https://blog.csdn.net/XSL_HR/article/details/130178296?spm=1001.2014.3001.5501
有关Axios的相关知识可以前往Axios知识专栏查看复习！！

场景复现

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

核心干货

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

axios取消请求

AbortController

首先简单介绍一下AbortController

• AbortController接口表示一个控制器对象，允许你根据需要中止一个或者多个Web请求。
• 我们可以使用AbortController.AbortController()构造函数创建一个新的AbortController，使用AbortSignal对象可以完成与DOM请求的通信。

• 构造对象：
  创建一个新的 AbortController 对象实例。AbortController.AbortController()
• 方法：
  AbortController.abort()
  中止一个尚未完成的 Web（网络）请求。这能够中止 fetch 请求及任何响应体的消费和流。

Axios 支持以 fetch API 方式—— AbortController 取消请求：

// 创建对象
const controller = new AbortController();
// 发送GET请求
// 将signal作为参数传递给Axios请求
axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

CancelToken deprecated

您还可以使用 cancel token 取消一个请求。可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

// 创建实例
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
// 发送GET请求 将cancelToken作为参数传递给Axios请求
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
// 发送POST请求 传递name cancelToken
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;
let cancel;
// 发送GET请求 传递cancelToken
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel();

注意: 可以使用同一个 cancel token 或 signal取消多个请求。

在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController();

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token,
  signal: controller.signal
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求 (message 参数是可选的)
source.cancel('Operation canceled by the user.');
// 或
controller.abort(); // 不支持 message 参数

请求体编码

默认情况下，axios将 JavaScript 对象序列化为 JSON 。 要以application/x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

浏览器

在浏览器中，可以使用URLSearchParams API，如下所示：

// 创建对象
const params = new URLSearchParams();
params.append('param1', 'value1');
// 将值添加进params中
params.append('param2', 'value2');
// 发送POST请求
axios.post('/foo', params);

qs库编码数据

const qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

ES6库方法

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

node.js

Query string

在 node.js 中， 可以使用 querystring 模块，如下所示:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

或者从'url module'中使用'URLSearchParams'，如下所示:

const url = require('url');
const params = new url.URLSearchParams({ foo: 'bar' });
axios.post('http://something.com/', params.toString());

Form data

const FormData = require('form-data');

const form = new FormData();
form.append('my_field', 'my value');
form.append('my_buffer', new Buffer(10));
form.append('my_file', fs.createReadStream('/foo/bar.jpg'));

axios.post('https://example.com', form, { headers: form.getHeaders() })

或者, 使用一个拦截器:

axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
});

---

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

关于axios的基础内容已经全部结束了，后续会分享一些vue项目中axios的实际运用！ 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习~ 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~