前端杂项-Axios注意事项

我个人认为没必要在项目中过度封装Axios，它本身就是个简单的库。减少心智负担，享受美好人生。废话不多说，请看下面的干货。

一：取消请求的变化

从 Axios v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求：

const controller = new AbortController();
axios.get('/foo/bar', {   signal: controller.signal}).then(function(response) {   //...});
// 取消请求controller.abort()

之前取消请求我们会用 CancelToken，此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用！

// 公众号无法直接外链，具体看官网说明
// https://axios-http.com/zh/docs/cancellation

二：Axios实例

我个人更推荐使用实例的方式配置，这样的好处是可以根据需求创建多个实例对象互不影响。

const instance = axios.create({ 
    baseURL: 'https://some-domain.com/api/',  
    timeout: 5000, 
    headers: {'X-Custom-Header': 'foobar'}
});

以下是可用的实例方法。指定的配置将与实例的配置合并。

• 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]])
• axios#getUri([config])

三：响应类型 responseType

responseType 表示将要响应的数据类型。

选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'，浏览器专属：'blob'。

通常情况下接口请求返回的是一个JSON，我们也不需要设置response，因为Axios默认的response: 'json'。

不过有的时候需要我们设置responseType 为 arraybuffer 或者 blob，比如文件下载的时候。

四：请求体编码

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

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

请注意，不是所有的浏览器(参见 caniuse.com)都支持 URLSearchParams ，但是可以使用polyfill (确保 polyfill 全局环境)

或者, 可以使用 qs 库编码数据:

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