Axios知识点梳理

axios是是个基于promise的 HTTP 库，它可以用在浏览器喝 node.js 中，有以下重要特性：

• 从浏览器中创建XMLHttpReuqest
• 从 node.js 中创建http请求
• 支持 Promise Api, async/await
• 可拦截请求、响应
• 能主动取消请求

创建请求

通过向axios传递相关配置来创建请求，返回promise

• axios(config)
• axios(url[,config]),默认get方法

请求方法别名

在使用别名时，url,method,data属性不必在config中指定

• axios.request(config)
• axios.get(url[,config])
• axios.post(url[,data[,config]])
• axios.put(url[,data[,config]])
• axios.patch(url[,config]): patch方法用来更新局部资源,而put虽然也是更新资源，但要求前端提供的是一个完整的资源对象。
• axios.delete(url[,config])
• axios.head(url[,config]): head请求与get类型，但是head并不返回消息体，此方法经常用来
  • 检测资源的有效性
  • 检测超链接的有效性
  • 检查网页是否被篡改
  • 自动机器人获取网页的标记信息，传递安全认真信息
• axios.options(url[,config]): options请求主要用途
  • 获取服务器支持的 HTTP 请求方法，在响应报文Allow首部字段
  • 在跨域请求中，options请求是浏览器在复杂请求（复杂请求，可能对浏览器数据产生副作用，如 delete, put,都会对服务器数据进行修改，所以在请求之前要先询问服务器，是否允许该跨域请求）时自动发起的预检请求（preflight request），以检测实际请求是否可以被浏览器接收

并发请求

axios.all(iterable),参数为可迭代的对象，且是 promise.
axios.spread(callback),回调函数参数为并非请求的响应对象，顺序同axios.all(iterable)中一致

axios.all([
  axios.get("https://api.github.com/users/mzabriskie"),
  axios.get("https://api.github.com/users/mzabriskie/orgs")
]).then(axios.spread(user,orgs) {
  // user  "/users/mzabriskie" 请求的响应
  // org   "/users/mzabriskie/orgs"" 请求的响应
})

创建实例

使用自定义配置新建一个axios实例

const instance = axios({
  // 请求配置
});

实例方法

指定的配置将与实例的配置合并，同请求方法别名类似。

请求配置选项

• url: 请求的服务器 URL 必填

• method: 请求方法，默认:'get'

• baseURL: 将自动加在url前面，除非url是绝对 URL

• transformRequest: 在向服务器发送之前，修改请求数据；后面数组中的函数（函数可接受 2 个参数，data，headers）必须返回字符串、或 ArrayBuffer，或 Stream

  transformRequest: [
    function (data, headers) {
      // 对 data 进行转化处理
      return data;
    },
  ];

• transformResponse: 修改响应数据，在传递给then/catch之前

  transformResponse: [
    function (data，headers) {
      // 对 data 进行转化处理
      return data;
    },
  ];

• headers: 自定义请求头

• params: 与请求一起发送的 URL 参数,对象

  params: {
    id: 123,
    name:  jiang
  }

• paramsSerializer, params序列化的函数

  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  }
  // qs 模块，查询字符串解析和序列化字符串的库
  // 在 序列化数组时 通过 arrayForm选项进行格式化输出
  // "indices": 带索引, 默认值
  // "brackets": 仅带有方括号
  // "repeat": 重复
  // "comma": 以逗号分隔
  const Qs = require("qs");
  let obj = {
    id: 123,
    friends: ["jiang", "ting"],
  };
  console.log(decodeURIComponent(Qs.stringify(obj))); // id=123&friends[0]=jiang&friends[1]=ting
  console.log(decodeURIComponent(Qs.stringify(obj, { arrayFormat: "indices" }))); // d=123&friends[0]=jiang&friends[1]=ting
  console.log(decodeURIComponent(Qs.stringify(obj, { arrayFormat: "brackets" }))); // id=123&friends[]=jiang&friends[]=ting
  console.log(decodeURIComponent(Qs.stringify(obj, { arrayFormat: "repeat" }))); // id=123&friends=jiang&friends=ting
  console.log(decodeURIComponent(Qs.stringify(obj, { arrayFormat: "comma" }))); //  id=123&friends=jiang,ting

• data: 作为请求主体被发送的数据，仅适用于put,post,patch请求，在没有设置transformRequest时，必须是以下类型：

  • String, plain object, ArrayBuffer,ArrayBufferView,URLSearchParams
  • 浏览器专属，FormData,File,Blob
  • Node 专属，Stream

• timeout: 请求超时毫秒数（0 表示无超时时间），请求超时，则被中断

• withCredentials: 跨域请求是否需要使用凭证，默认值 false

• auth: 表示使用 HTTP 基本认证，并提供身份凭据，用户名和口令

  auth: {
    username: 'jiang',
    password: '123456'
  }

• responseType: 服务器响应的数据类型，默认json,也可以是arraybuffer,blob,text,stream,documnet

• responseEncoding: 用于解码响应信息的编码 默认utf8

• onUploadProgress/onDownloadProgress: 为上传/下载 处理进度事件

  onUploadProgress: function(progressEvent) {
    let percentCompleted = Math.round(progressEvent.loaded * 100 / progressEvent.total);
  }

• maxContentLength: 响应内容的最大字节数

• validateStatus: 定义对于给定的 HTTP 响应状态码是 promise 是 resolve 或 reject；返回 ture，promise 被 resolve，返回 false, promise 被 reject

  validateStatus: function(status) {
    return status >= 200 && status < 300;     //  默认值
  }

响应结构

请求的响应包含以下信息

• data: 由服务器提供的响应
• status: 服务器响应的 HTTP 状态码
• statusText: 响应的 HTTP 状态信息
• headers: 服务器响应头
• config: 为请求提供的 配置信息
• request: 生成该响应的请求，
  • 在浏览器中是一个XMLHttpRequest实例
  • 在 node.js 中是一个ClientRequest实例

配置默认值

• 全局的 axios 默认值，

  axios.defaluts.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";

• 自定义实例的默认值

  const instance = axios.create({
    baseURL: "https://better-jiang.github.io/",
  });
  instance.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded";

配置优先顺序

顺序：全局默认值 < 实例的defaults属性 < 请求时的config参数；后者会覆写前者。

拦截器

• 请求拦截器,axios.interceptors.request.use(successFn,errorFn)

  let resInterceptor = axios.interceptors.request.use(
    function (config) {
      // do some thing
      return config;
    },
    function (error) {
      // do some thing
      return Promise.reject(error);
    }
  );

• 响应拦截器: axios.interceptors.response.use(successFn, errorFn)

  let repInterceptor = axios.interceptors.response.use(
    function (response) {
      // ...
      return response;
    },
    function (error) {
      // ...
      return Promise.reject(error);
    }
  );

• 移除拦截器

  axios.interceptors.request.eject(resInterceptor);
  axios.interceptors.response.eject(repInterceptor);

错误处理

axios.get("/user/123456").catch(function (error) {
  if (error.response) {
    // 响应出错
  } else if (error.request) {
    // 请求出错
  } else {
    // 其他
  }
});