axios入门手册

axios是基于Promise的http请求处理函数库(客户端)。

http api

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.all(iterable)
axios.spread(callback)

Request Config

{
  url:'/example/data',
  method:`get`,
  baseURL:'http://domain/api/',

  //请求前的数据处理,只适用于`PUT`,`POST`,`PATCH`方法。
  //数组中最后一个函数必须返回一个字符串或一个`ArrayBuffer`、`Stream`,`Buffer`、`ArrayBuffer`、`FormData`
  transformRequest:[function(data,headers){
    return data;
  }],

  //拦截处理返回的数据
  transformResponse:[function(data){
       return data;
  }],

  headers:{'X-Requested-with':'XMLHttpRequest'},

  //请求参数,对象或URLSearchParams
  params:{
    ID:12345
  },
   
  //可选的函数,参数处理
  paramsSerializer: function(params){
    return qs.stringify(params,{arrayFormat:'brackets'})
  },

  //适用于'PUT'、'POST'、'PATCH'
  //未设置`transformRequest`时,数据必须是以下类型之一:
  //-string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams
  //FormData、File、Blob、Stream
  data:{
    key:value
  },
  timeout:1000,
   
  //`withCredentials`跨跨域请求是否需要验证。
  withCredentials:false //默认值

  //`adapter`适配器,允许自定义处理请求
  adapter:function(config){
  },


  //设置一个header参数:`authorization` ,会覆盖在header设置的Authorization信息。
  auth:{
    username:'xieyonghui.com',
    password:'passsw'
  },

  //返回的数据类型:'arraybuffer'、'blob'、'document'、'json'、'text',stream'
  responsetype:'json',

  //编码方式。
  //忽略responseType为stream的请求。
  responseEncoding:'utf8'

  //cookie作为xsrf会话名。
  xsrfCookieName:'XSRF-TOKEN',

  //`携带xsrf值的header参数
  xrsfHeadername:'X-XSRF-TOKEN',

  //上传进度事件
  onUploadProgress: function(progressEvent){
  },

  //下载进度事件
  onDownloadProgress: function(progressEvent){
  },

  //http返回的最大字节量
  maxContentLength: 2000,


  //validateStatus`返回true、null、undefined,promise将会resolve;其他将reject。
  validateStatus: function(status){
    return status >= 200 && stauts < 300;
  },

  //若为0,没有redirect
  maxREdirects:5,


  //若定义则只使用`socketPath`。
  socketPath:null,

  //`httpAgent` 、`httpsAgent`自定义代理。
  httpAgent: new http.Agent({keepAlive:treu}),
  httpsAgent: new https.Agent({keepAlive:true}),

  //定义服务器的主机名字和端口号。
  //`auth`认证信息。
  //设置一个header参数:'Proxy-Authorization'。
  proxy:{
    host:127.0.0.1,
    port:9000,
    auth:{
      username:'xieyonghui.com',
      password:'paaaaasw'
    }
  },

  //定义一个取消操作
  cancelToken: new CancelToken(function(cancel){
  })
}

默认设置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';

自定义通用参数

var instance = axios.create({
  baseURL:'https://api.example.com'
});

//或在实例创建后改变默认值

instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

config优先级

lib/defaults.js定义参数

defaults实例属性,

请求中config参数。

三者优先级为后者覆盖前者。

拦截器

请求处理拦截器

axios.interceptors.request.use(function(config){
  return config;
},function(error){
  return Promise.reject(error);
});

响应处理拦截器

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

移除拦截器

var interceptor = axios.interceptors.request.use(function(){});
axios.interceptors.request.eject(interceptor );

添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function(){});

异常处理

axios.get(url).catch(function(error){})

定义异常捕捉范围

axios.get(url,{
  validateStatus:function(status){
    return status < 300;
  }
});

取消操作

var ct= axios.CancelToken;
var source = ct.source();

axios.get(url, {
  cancelToken:source.toke
}).catch(function(thrown){
  if(axiso.isCancel(thrown)){
    //Rquest canceled
  }else{
    //handle error
  }
});

source.cancel("操作已取消");

带构造函数

const ct= axios.CancelToken
let cancel;

acios.get(url,{
 cancelToken:new CancelToken(function excutor(c){
  cancel = c
 })
})

cancel();

请求参数处理

axios默认将参数以JSON格式发送。若需要application/x-wwww-form-urlencoded格式,通过以下方式处理:

浏览器内置函数

var params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post(url,params);

第三方函数库

var qs = require('qs');
axios.post(url, qs.stringify({name:value}));