知识库

Axios

一款基于 Promise 封装的 AJAX 库。

axios([options]) options url: 请求API baseURL: 基础url路径 method: 请求方法 transformRequest: 发送请求前处理请求参数(POST系列) transformRespone: 传递给then/chatch前允许修改响应数据 headers: 设置请求头,不支持中文,要手动编码 params: GET系列请求会把params内容拼接为x-www-form-urlencode格式, 基于问号传参给服务器,会自动判断url中是否有部分参数从而决定加?还是& paramsSerializer: 传递参数序列化 data: 请求体(POST系列请求) timeout: 超时时间 validateStatus: 重新定义状态码成功的范围 withCredentials: 跨域请求是否允许携带cookie responseType: 预设服务器返回结果格式,默认为json,支持json/buffer/text/stream/document... ...

为方便起见，为所有支持的请求方法提供了别名.在使用别名方法时,url、method这些属性都不必在配置中指定。(设置了也无效)
axios.get([url], [options])
axios.head([url], [options])
axios.delete([url], [options])
axios.option([url], [options])
axios.post([url], [data], [options])

响应结果
  {
    data: {}, // 响应结果
    status: 200, // 响应的 HTTP 状态码
    statusText: 'OK', // 响应的 HTTP 状态信息
    headers: {}, // 响应头
    config: {}, // 请求时的配置信息
    request: {} // xhr实例
  }

axios()/axios.xxx()都会返回一个Promise实例,请求成功实例状态为resolved,
请求失败实例状态为rejected,并且把获取的结果或错误原因传入

axios.all() 执行多个并发请求
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
  
配置优先级: config参数 > 实例的defaults属性 > lib/defaults.js的默认值

javascript

axios({

  // 请求方法
  method: 'GET',

  // 请求 URL
  url: 'http://localhost:3000/getTime',

  // 请求头
  headers: {
    Foo: 'foo',
  },

  query
  params: {
    foo: 'foo',
    bar: 'bar'
  },

  // body
  data: {
    foo: 'foo',
    bar: 'bar'
  },

  // axios 中只有在 HTTP 响应状态码以 2 开头时才认为是成功，
  // 可以通过 validateStatus 来修改成功的范围。
  validateStatus (status) {
    return status >= 200 && status < 400
  },

  // POST 请求发送前处理 data
  transformRequest (data) {
    let res = ''

    for (const key in data) {
      res += `${ key }=${ data[key] }&`
    }

    return res.slice(0, -1)
  },

  // 传递给 then 或 chatch 前允许修改响应数据
  transformResponse: [data => data ],

  // 跨域时携带 Cookie
  // withCredentials: true
  }
)
.then(value => {
  /*
    config: 自己配置的配置项信息
    data: 响应体
    headers: 响应头
    request: xhr实例
    status: 响应状态码
    statusText: 响应状态码描述
  */
  console.log(value)
}, reason => {
  console.dir(reason)
})

别名

为方便起见，为所有支持的请求方法提供了别名。在使用别名方法时，url、method 属性都不必在配置中指定。

axios.get([url], [options])
axios.post([url], [data], [options])
...

Axios ​

别名 ​

Axios

别名