Axios请求(对于ajax的二次封装)——Axios取消请求、请求体编码

Axios请求(对于ajax的二次封装)——Axios取消请求、请求体编码

  • 知识回调(不懂就看这儿!)
  • 场景复现
  • 核心干货
    • axios取消请求
      • AbortController
      • CancelToken deprecated
    • 请求体编码
      • 浏览器
        • qs库编码数据
        • ES6库方法
      • node.js
        • Query string
        • Form data

知识回调(不懂就看这儿!)

知识专栏 专栏链接
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的封装和实现,涉及到了很多底层的基础知识,比如ajaxaxios工具,因此计划用两个专栏来系统的学习关于axiosajax的实用知识。
本期文章将重点介绍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 tokensignal取消多个请求。

在过渡期间,您可以使用这两种取消 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的实际运用!
感兴趣的小伙伴可以订阅本专栏,方便后续了解学习~
觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

你可能感兴趣的:(Axios,ajax,javascript,前端,axios)