axios 笔记

参考文档
axios 基于 Promise

基本使用

axios(config)

通过axios.defaults配置全局默认值
发起请求

axios(config)

config 包括：

• url: ‘xxxx’
• method: ‘get’
• data: (方法为post时有效)
• ···

axios 提供了请求方法的别名api 如 axios.get(···)

请求配置 结构

{
  url: '/xxxx', 
  baseURL: 'https://some-domain.com/api/', // 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL

  method: 'get', // default
  
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  
  timeout: 1000, // 默认值是 `0` (永不超时)
  
  params: { // url参数
    ID: 12345
  },
  paramsSerializer: function (params) { // 序列化 params
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
  
  data: { // for 'PUT', 'POST', 'DELETE 和 'PATCH'
    firstName: 'Fred'
  },
  
  responseType: 'json', // 表示服务器响应的数据类型 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'  

  // 可对'PUT', 'POST', 'PATCH'的header、data进行转化
  // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理
    return data;
  }],
  // 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],
  
  withCredentials: false, // 表示跨域请求时是否需要使用凭证

  adapter: function (config) { // 自定义请求处理，通常为了方便测试
    /* ... */
  },

  auth: { // HTTP Basic Auth
    username: 'janedoe',
    password: 's00pers3cret'
  },

  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },
  
  validateStatus: function (status) { // 对于给定的 HTTP状态码是 resolve 还是 reject
    return status >= 200 && status < 300; // 默认值
  },
    
  // 以下仅针对 node
  responseEncoding: 'utf8', // 解码响应的编码
  maxContentLength: 2000, // 响应内容的最大字节数
  maxBodyLength: 2000, // 请求内容的最大字节数
  maxRedirects: 5, // 最大重定向数
  socketPath/proxy: ''
  
  ···
}

响应 结构

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

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

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

  // `headers` 服务器响应的头
  headers: {},

   // `config` 是为请求提供的配置信息
  config: {},
 // 'request'
  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: {}
}

创建实例

axios.create([config])

config = {
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
}

通过实例.defaults配置实例默认值

配置覆盖顺序 lib/defaults.js < defaults < config

拦截器 interceptors

分类：

• request 请求 处理config
• response 响应 处理正确返回

新增与关闭：

• use 定义拦截器
• eject 关闭拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 发送请求之前
  return config;
}, function (error) {
  // 请求错误时
  return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 默认状态 2xx
  return response;
}, function (error) {
  // 默认非2xx时
  return Promise.reject(error);
});

注意：响应拦截器只处理 resolve 情况

错误处理

默认情况下，状态 2xx 会 resolve
其他会 reject

通过 validateStatus 可进行配置

通过 .catch() 进行错误处理。

取消请求

通过将AbortController实例的signal传参

{
   signal: controller.signal
}

MDN AbortController

---

application/x-www-form-urlencoded格式编码

---

封装 axios

参考博客
基本思路：

1. 引入 axios

import axios from 'axios

2. 创建 axios 实例 进行全局配置

const api = axios.create({···})

3. 设置拦截器（interceptors）：
   请求（request）：

• 添加token鉴权
• post数据序列化
  响应（response） ：
  做一些数据预处理

4. 将实例开放 （export）

export default api

如果有统一错误码演示标准可多一层 Promise 封装

5. 引入实例 （import）为业务逻辑编写相关请求同时导出
6. 在需要的地方调用接口

比较蛋疼的一个点 get 的 params 传参不太一样 { params: xxx }
当传的参数值为null，不会保留参数
get 传数组参数时，会自动给参数加 [] 后缀。。。