Axios学习

Axios 是一个基于promise的HTTP库, 可以在 浏览器和node.js中使用。

Axios特点: 

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持Promise API
• 拦截请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持XSRF

axios API

1. 通过向axios传递相关配置来创建请求

• axios( url , [config] )     

  axios( '/user/12345');   // 发送GET请求(默认的方法)

• axios(config)          

  axios( {
     methods: 'post' ,  // 发送POST请求
     url: '/user/12345',
     data: {
         firstName:'Fred',
         lastName: 'Flintstone'
     }
  });

   

2. 请求方法的别名

 为方便起见，为所有支持的请求方法提供了别名。

• axios.request( config )
• axios.get( url , [config] )

  axios.get ('/user?ID=12345')     // axios 发送GET请求
     .then( function(res){
         console.log( response);
     } )
     .catch( function(error){
         console.log( error );
     } ); 

• axios.head( url , [config] )
• axios.delete( url, [config] )
• axios.put( url , [data], [config] )
• axios.post( url , [data], [config] )

  axios.post ('/user', { firstName:"Fred", lastName:"Flintstone" })    // axios发送POST请求
    .then( function(res){ console.log(res); })
    .catch( function(error){ console.log(error); })

• axios.patch( url , [data], [config] )

注: 在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

3. 并发

使用自定义配置新建一个 axios实例: axios. create ( [config] )

var instance = axios.create( {
    baseURL : "https://some-domain.com/api/" ,
    timeout : 1000,
    headers : {"X-Custom-Header" : "foobar"}

});

实例的方法 有上面的 6种请求。且 指定的配置 将与 实例的配置 合并。

处理并发请求的助手函数: 

•  axios . all ( iterable )    iterable : 迭代
•  axios . spread( callback )

Axios执行多个并发请求: 

function getUserAccount(){
    return axios.get('/user/12345');
} 
function getUserPermissions(){
    return axios.get('/user/12345/permissions');
}

axios.all( [ getUserAccount() , getUserPermissions() ])
 .then( axios.spread( function(acct, perms){
       // 两个请求现在都执行完成
   } ) );

4. 请求配置

在创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

• url :  请求的服务器URL
• method :  创建请求时使用的方法。
• baseURL :  baseURL将自动添加在 url前面, 除非url是一个绝对URL。
• transformRequest : 允许在向服务器发送前, 修改请求数据。
• transformResponse : 允许在传递给 then/catch 前, 修改响应数据。
• headers : 即将被发送的自定义请求头 。
• ​​​​​​​params :  即将被与请求一起发送的URL参数。
• ​​​​​​​paramsSerializer :​​​​​​​  是一个负责params序列化的函数
• ​​​​​​​data : 作为请求主体被发送的数据。
• ​​​​​​​timeout : 如果请求花费的时间超过timeoue值, 请求将被中断。
• adapter :
• ​​​​​​​auth :  表示应该使用HTTP基础验证,并提供凭据。
• resoponseType : 表示服务器响应的数据类型。
• ​​​​​​​xsrfCookieName: 用作xsrf token 的值的cookie的名称。
• xsrfHeaderName : 是承载xsrf token 的值的HTTP头的名称。
• ​​​​​​​onUploadProgress : 允许为上传处理进度事件。
• onDownloadProgress : 允许为下载处理进度事件。
• maxContentLength : 定义允许的响应内容的最大尺寸。
• validateStatus : 定义对于给定的HTTP响应状态码
• ​​​​​​​maxRedirects : 定义在node.js中follow的最大重定向数目。
• ​​​​​​​httpAgent / httpsAgent :
• ​​​​​​​proxy : 定义代理服务器的主机名和端口号。
• cancelToken :  指定用于取消请求的 cancel token。

{
   url : '/user',
   methods: 'get',                           // 默认值 get
   baseURL: 'https: //some-domain.com/api/',
   transformRequest : [ function(data){
          // 对 data 进行任意转换处理
          return data;
      } ],
   transformResponse : [ function(data){
           // 对 data 进行任意转换处理
          return data;
      } ],
   headers : { 'X-Requested-With' : "XMLHttpRequest' },
   params : { 
          ID : 12345
      },
   paramsSerializer: function(params) {
          return Qs.stringify(params, {arrayFormat: 'brackets'})
     },
   data: {
         firstName: 'Fred'
     },
   timeout: 1000,
   withCredentials : false,                            // 默认值
   adapter: function (config) { },
   auth: {
         username: 'janedoe',
         password: 's00pers3cret'
     },
   responseType: 'json',                                // 默认值
   xsrfCookieName: 'XSRF-TOKEN',                        // 默认值
   xsrfHeaderName: 'X-XSRF-TOKEN',                      // 默认值
   onUploadProgress: function (progressEvent) {
        // 对原生进度事件的处理
     },
   onDownloadProgress: function (progressEvent) {
        // 对原生进度事件的处理
     }, 
   maxContentLength: 2000,
   validateStatus: function (status) {
         return status >= 200 && status < 300;     // 默认值
     },
   maxRedirects: 5,                                 // 默认值
   httpAgent: new http.Agent({ keepAlive: true }),
   httpsAgent: new https.Agent({ keepAlive: true }),
   proxy: {
        host: '127.0.0.1',
        port: 9000,
        auth: : {
           username: 'mikeymike',
           password: 'rapunz3l'
        }
     },
   cancelToken: new CancelToken(function (cancel) { })

}

5. 响应结构

某个请求的响应 包含以下信息: 

{
  data: {},           // `data` 由服务器提供的响应
  status: 200,        // `status` 来自服务器响应的 HTTP 状态码
  statusText: 'OK',   // `statusText` 来自服务器响应的 HTTP 状态信息
  headers: {},        // `headers` 服务器响应的头
  config: {}          // `config` 是为请求提供的配置信息
}

使用 then 时，将接收下面这样的响应：

axios.get('/user/12345')
  .then(function(res) {
    console.log(res.data);
    console.log(res.status);
    console.log(res.statusText);
    console.log(res.headers);
    console.log(res.config);
  });

在使用 catch 时，或传递 rejection callback 作为 then 的第二个参数时，响应可以通过 error 对象可被使用。正如在错误处理这一节所讲。

6. 配置的默认值/defaults

可以通过`axios.defaults.`指定将被 用在各个请求的配置默认值。

6.1 配置全局的axios默认值

axios.defaults.baseURL = "https://api.example.cpm';
axios.defaults.headers.common['Authorization] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded";  // 设置POST请求头类型

6.2 配置自定义的axios默认值

• 创建实例时设置配置的默认值。

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

• 在实例已经创建后修改默认值。

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

6.3 配置的优先顺序

配置会以一个优先顺序进行合并。

优先顺序是:  在` lib/defaults.js`找到的库的默认值 --> 然后是实例defaults属性 --> 最后是 请求的config参数。

后者将优于前者。

 // 使用有库提供的配置默认值来创建实例
var instance = axios.create();     // 此时超时配置的默认值为 0


 // 覆写 库的超时默认值
instance.defaults.timeout = 2500;   // 此时,在超时前,所有请求会等待2.5秒


 // 为已知需要花费很长时间的请求 覆写超时设置
instance.get( '/longRequest', {
    timeout : 5000
});

7. 拦截器

使用`axios.interceptors.` 在 请求或响应 被  then或catch处理前  拦截它们。

• 添加 请求拦截器 : axios.interceptors.request.use()
• 添加 响应拦截器 : axios.interceptors.response.use()

   // 添加 请求拦截器
axios.interceptors.request.use( function(config){
      // 在发送请求前做些什么
      return config;
} , function(error){
      // 对错误做些什么
      return Promise.reject(error);
} );



   // 添加 响应拦截器
axios.interceptors.response.use( function(res){
      // 对响应的数据做些什么
      return res;
} , function(error){
      // 对错误做些什么
      return Promise.reject(error);
} );

为自定义的Axios实例添加拦截器: 

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

移除拦截器: axios.interceptors.request.eject( 拦截器名称 );

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

8. 错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
         // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
         // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

 使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})

9. 取消

使用 cancel token 取消请求

Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。

使用 CancelToken.source 工厂方法创建 cancel token ：

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

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

注 : 可以使用同一个 cancel token 取消多个请求