axios

Posted 2022-10-01 yaokai729

　　axios 是基于原生的ES6 Promise 实现，如果浏览器环境不支持请使用垫片。

1.特征

• 浏览器端发起XMLHttpRequests请求

• node端发起http请求

• 支持Promise API

• 拦截请求和返回

• 转化请求和返回数据

• 取消请求

• 自动转化json数据

• 客户端支持抵御XSRF（跨站请求伪造）

　　axios.get(‘/user‘, 
   　　 params: 
   　　   ID: 12345
  　　  
 　　 )
 　　 .then(function (response) 
 　　   console.log(response);
 　　 )
　　  .catch(function (error) 
 　　   console.log(error);
　　  )
　　  .then(function () 
 
　　  );  

　　对axios传递一些的设置来生成请求。

　　axios(
　　  method: ‘post‘,
　　  url: ‘/user/12345‘,
　　  data: 
  　　  firstName: ‘Fred‘,
 　　   lastName: ‘Flintstone‘
　　  
　　);

　　注意：使用别名方法时url，不需要在config中指定method和data属性。

　请求方法：

• 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)

　注意：因为axios.all使用的是类似Primise.all的功能，所以如果其中有一个请求出现了错误那么就会停止请求，所以建议对于单个请求最好附加上处理的catch。

 

2.请求设置

　请求时的设置选项。只有 url 是必须的，如果没有指明 method 的话，默认的请求方法是 GET.

　　
  　　  // url 是服务器链接，用来请求
  　　  url:‘/user‘,
?
   　　 // method 是发起请求时的方法
  　　  method:`get`,
?
  　　  // baseURL如果 url 不是绝对地址，那么将会加在其前面。
  　　  // 可以很方便的对相对地址的axios实例设置 baseUrl 。
  　　  baseURL:‘http://some-domain.com/api/‘,
?
  　　  // transformRequest 允许请求的数据在发送至服务器之前进行转化。
  　　  // 这个只适用于 PUT , POST , PATCH 方法。
  　　  // 数组中的最后一个函数必须返回一个字符串或者一个 ArrayBuffer ,或者 Stream , Buffer 实例,  ArrayBuffer , FormData 
  　　  //此外你也可能需要设置下headers对象
   　　 transformRequest:[function(data,headers)
    　　    return data;
  　　  ],
?
  　　  // transformResponse 允许对返回的数据传入then/catch之前进行处理
  　　  transformResponse:[function(data)
  　　      return data;
 　　   ],
?　　
  　　  // headers 是自定义的要被发送的信息头
 　　   headers:‘X-Requested-with‘:‘XMLHttpRequest‘,
?
  　　  // params 是请求连接中的请求参数，必须是一个纯对象，或者URLSearchParams对象
 　　   params:
 　　       ID:12345
 　　   ,
    
  　　  // paramsSerializer 是一个可选的函数，用来控制和序列化参数
 　　   paramsSerializer: function(params)
  　　      return Qs.stringify(params,arrayFormat:‘brackets‘)
 　　   ,
?
   　　 // data 是请求时作为请求体的数据
  　　  data:
  　　      firstName:‘fred‘
  　　  ,
   　　 //`timeout`定义请求的时间，单位是毫秒。
 　　   //如果请求的时间超过这个设定时间，请求将会停止。
  　　  timeout:1000,
    
 　　   //`withCredentials`表明跨域请求书否需要证明。
 　　   withCredentials:false //默认值
?
  　　  // adapter 适配器，允许自定义处理请求，这会使测试更简单。
  　　  //返回一个promise，并且提供一个有效的响应。
  　　  adapter:function(config)
   　　     /*...*/
 　　   ,
?
  　　  // auth 表明HTTP基础的认证应该被使用，并且提供证书。
 　　   //这个会设置一个 authorization头，并且覆盖你在header设置的 Authorization头信息。
 　　   auth:
  　　      username:‘janedoe‘,
　　        password:‘s00pers3cret‘
　　    ,
?
  　　  // responsetype 表明服务器返回的数据类型，这些类型的设置应该是
 　　   //‘arraybuffer‘,‘blob‘,‘document‘,‘json‘,‘text‘,stream‘
 　　   responsetype:‘json‘,
?
  　　  // responseEncoding 表明解析相应的编码方式。
 　　   // 注意：会忽视responseType为stream或者客户端的请求。
 　　   responseEncoding:‘utf8‘ //默认值
?
  　　  // xsrfCookieName 时cookie做xsrf会话时的名字。
 　　   xsrfCookieName:‘XSRF-TOKEN‘, //默认值
?
　　    // xsrfHeaderName 是http头的名字，并且该头携带xsrf的值
 　　   xrsfHeadername:‘X-XSRF-TOKEN‘，//默认值
?
 　　   // onUploadProgress 允许处理上传过程的进程事件
 　　   onUploadProgress: function(progressEvent)
　　        //本地过程事件发生时想做的事
　　    ,
?
 　　   // onDownloadProgress 允许处理下载过程的进程事件
　　    onDownloadProgress: function(progressEvent)
  　　      //下载过程中想做的事
　　    ,
?
 　　   // maxContentLength 定义http返回内容的最大字节容量
 　　   maxContentLength: 2000,
?
　　    // validateStatus 定义promise的resolve和reject。
　　    // http返回状态码，如果 validateStatus 返回true（或者设置成null/undefined），promise将会resolve；其他的promise将reject。
 　　   validateStatus: function(status)
 　　       return status >= 200 && stauts < 300; //默认
　　    ,
?
　　    // maxRedirect 定义重导向到node.js中的最大数量。
    //如果值为0，那么没有redirect。
 　　   maxREdirects:5, //默认值
?
　　    // socketPath 定义一个在node.js中使用的 UNIX Socket。
   　　 // 例如： /var/run/docker.sock 发送请求到 docker daemon。
  　　  // socketPath 和 proxy 只可定义其一，如果都定义则只会使用 socketPath 。
  　　  socketPath:null, //默认值
?
  　　  // httpAgent 和 httpsAgent 当产生一个http或者https请求时分别定义一个自定义的代理，
 　　   //在nodejs中，这个允许设置一些类似 keepAlive 的选项，这个在默认中是没有开启的。
  　　  httpAgent: new http.Agent(keepAlive:true),
 　　   httpsAgent: new https.Agent(keepAlive:true),
?
　　    // proxy 定义服务器的主机名字和端口号。
　　    // auth 表明HTTP基本认证应该跟 proxy 相连接，并且提供证书。
　　    //这个将设置一个‘Proxy-Authorization‘头(header)，覆盖原先自定义的。
　　    proxy:
 　　       host:127.0.0.1,
　　       port:9000,
 　　       auth:
    　　        username:‘cdd‘,
  　　          password:‘123456‘
  　　      
  　　  ,
?　　
 　　   // cancelToken  定义一个取消，能够用来取消请求
　　    cancelToken: new CancelToken(function(cancel)
 　　   )
　　

 

3.返回响应信息

　一个请求的返回包含以下信息

    //`data`是服务器的提供的回复（相对于请求）
    data,
?
    //`status`是服务器返回的http状态码
    status:200,
?
?
    //`statusText`是服务器返回的http状态信息
    statusText: ‘ok‘,
?
    //`headers`是服务器返回中携带的headers
    headers:,
?
    //`config`是对axios进行的设置，目的是为了请求（request）
    config:
?
    //`request`是获取当前相应的请求，是在浏览器中的XMLHttpREquest实例

使用 then 时，会接受到下面的信息：

axios.get(‘/user/12345‘)
    .then(function(response)
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
    );

 

4.设置默认设置

　　设置默认的设置，这设置将在之后的每次请求中生效。

　　全局默认设置

　　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;

 

5.拦截器 interceptors

　　在请求或者返回被 then 或者 catch 处理之前对他们进行拦截。

　　//添加一个请求拦截器
　　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 myInterceptor = axios.interceptors.request.use(function()/*...*/);
    axios.interceptors.request.eject(myInterceptor);

　　在一个axios实例中使用拦截器

    var instance = axios.create();
    instance.interceptors.request.use(function()/*...*/);

 

6.取消请求

　　cancel token取消一个请求

　　const CancelToken = axios.CancelToken;
　　const source = CancelToken.source();

　　axios.get(‘/user/12345‘, 
　　  cancelToken: source.token
　　).catch(function (thrown) 
 　　 if (axios.isCancel(thrown)) 
   　　 console.log(‘Request canceled‘, thrown.message);
 　　  else 
 　　   // handle error
　　  
　　);

　　axios.post(‘/user/12345‘, 
　　  name: ‘new name‘
　　, 
  　　cancelToken: source.token
　　)

　　source.cancel(‘Operation canceled by the user.‘);

 

7.使用 application/x-www-form-urlencoded 格式的方式

　　默认情况下，axios串联js对象为JSON格式。为了发送application/x-wwww-form-urlencoded格式数据，有以下方法：

1. 在浏览器中使用URLSearchParams API:

   注意：URLSearchParams不支持所有的浏览器，但是这里有个垫片可用（确保垫片在浏览器全局环境中）

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

　　2.1 可以使用qs库来对数据编码。

　　     注意：qs 如果您需要对嵌套对象进行字符串化，那么该库是首选，

　　var qs = require(‘qs‘);
　　axios.post(‘/foo‘, qs.stringify(‘bar‘:123));

　　2.2 使用qs库的另一种方式(es6)

　　import qs from ‘qs‘;
　　const data = ‘bar‘:123;
　　const options = 
　　  method:‘POST‘,
　　  headers:
  　　  ‘content-type‘:‘application/x-www-from-urlencoded‘
 　　 ,
 　　 data:qs.stringify(data),
 　　 url
　　
　　axios(options)