Axios ajax

1. 基本概念

1.1 Ajax

Ajax 全称为 " Asynchronous JavaScript and XML “（异步 JavaScript 和 XML ）。其核心由 JavaScript、XmlHttpRequest 、DOM 对象组成，通过 XmlHttpRequest 对象，向服务器发送异步请求，从服务器获得数据，然后用 JavaScript 来操作 DOM 而更新页面。以 Jquery 为例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

$.ajax({
    type: 'GET',
    url: '/api/user/',
    async: false,
    dataType: 'json',
    data: {},
    success: function(res) {
        //请求成功后的回调操作
    }
});

常见参数说明：属性参数：

• type：请求方法，post、get、put、delete 等，默认为get。
• url：发送请求的地址，String 类型的参数，默认为当前页地址。
• timeout：设置请求超时时间，Number 类型的参数，单位，毫秒。
• async：是否为异步请求，Boolean 类型的参数，默认设置为true。
• cache：是否缓存，Boolean类型的参数，默认为true，当 dataType 为 script 或 jsonp 时，默认为false。
• data：请求的参数，Object 或 String 类型的参数。
• dataType：预期服务器返回的数据类型，String 类型的参数，xml、html、script、json、jsonp、text之一。
• contentType：编码类型，默认为 “application/x-www-form-urlencoded”。

回调参数：

• beforeSend：发送请求前调用的函数。
• complete：请求完成后调用的函数。
• success：请求成功后调用的函数。
• error：请求失败时被调用的函数。

最后，Jquery 提供了一个全局设置函数，$.ajaxSetup，用于统一处理某些操作。

1.2 XMLHttpRequest

XMLHttpRequest 用于在后台与服务器交换数据。页面加载后，在后台向服务器发送数据，不需要重新加载页面就可以更新页面。先看个示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var xhr = new XMLHttpRequest();

xhr.open("GET", '/api/user/', true);
// 第三个参数，是否异步

xhr.onreadystatechange()
{
    if (xhr.readyState == 4 && xhr.status == 200) {
        var res = xhr.responseText;
        //请求成功后的回调操作
    }
}

xhr.send(null);
// null表示参数为空

方法：

• open：初始化请求。
• send：发送请求。
• abort：忽略 XmlHttp 对象，重新回到未初始化状态，也意味着终止请求。
• setRequestHead：设置请求的报头，例如请求的编码格式。
• getResponseHead：获取响应的指定报头。
• getAllResponseHead：获取响应的全部报头。

属性：

• readyState ：工作状态 0 (未初始化)、 1 (初始化)、 2 (发送数据)、 3 (数据传送中) 、 4 (完成) 共5个值。
• status：存放响应的状态码。
• statusText：存放响应状态码的简短描述。
• responseText：存放响应的文本，以文本方式存放。
• responseXML：存放响应的XML文档模式对象，如果返回的是文本些值为null.

回调：

• onreadystatechange：当state状态发生改变时，调用的函数。

2. Axios

Axios 是一个基于 Promise 用于浏览器和 Nodejs 的 HTTP 客户端，它本身具有以下特征：

• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

2.1 使用方法别名

先看个示例：

1
2
3
4
5
6
7

axios.get('/api/user/')
    .then(function (res) {
        console.log(res);
    })
    .catch(function (error) {
        console.log(error);
    });

可用的别名：

• axios.request（config）
• axios.get（url [，config]）
• axios.delete（url [，config]）
• axios.head（url [，config]）
• axios.post（url [，data [，config]]）
• axios.put（url [，data [，config]]）
• axios.patch（url [，data [，config]]）

###2.2 使用配置方法先看个示例

1
2
3
4

axios({
  method: 'get',
  url: '/api/user/'
});

2.3 参数配置

• url： 用来向服务器发送请求的 url 。
• method ： 请求方法，默认是 get 方法。
• baseURL ： 基础 URL 路径，假如 url 不是绝对路径，http://domain.com/api/login?name=jack ，那么向服务器发送请求的 URL 将会是baseURL + url。
• transformRequest： transformRequest 方法允许在请求发送到服务器之前修改该请求，此方法只适用于 PUT、POST和PATCH 方法中。而且，此方法最后必须返回一个 string、ArrayBuffer 或者 Stream。
• transformResponse： transformResponse 方法允许在数据传递到 then、catch 之前修改 response 数据。此方法最后也要返回数据。
• headers ： 发送自定义 Headers 头文件，头文件中包含了 http 请求的各种信息。
• params ： params 是发送请求的查询参数对象，对象中的数据会被拼接成 url?param1=value1&param2=value2。
• paramsSerializer ： params 参数序列化器。
• data ： data 是在发送 POST、PUT或者PATCH请求的数据对象。
• timeout ： 请求超时设置，单位为毫秒.
• withCredentials ： 表明是否有跨域请求需要用到证书.
• adapter ： adapter 允许用户处理更易于测试的请求。返回一个 Promise 和一个有效的 response.
• auth ： auth 表明提供凭证用于完成 http 的身份验证。这将会在headers中设置一个 Authorization 授权信息。自定义Authorization 授权要设置在 headers 中。
• responseType： 表示服务器将返回响应的数据类型，有 arraybuffer、blob、document、json、text、stream这6个类型，默认是json类似数据。
• xsrfCookieName ： 用作 xsrf token 值的 cookie 名称。
• xsrfHeaderName ： 带有 xsrf token 值 http head 名称。
• onUploadProgress ：允许在上传过程中的做一些操作。
• onDownloadProgress： 允许在下载过程中的做一些操作。
• maxContentLength：定义了接收到的 response 响应数据的最大长度。
• validateStatus ：validateStatus 定义了根据 HTTP 响应状态码决定是否接收或拒绝获取到的 promise。如果 validateStatus 返回 true （或设置为 null 或 undefined ），promise 将被接收；否则，promise 将被拒绝。
• maxRedirects ： maxRedirects 定义了在 Node.js 中 redirect 的最大值，如果设置为 0 ，则没有 redirect 。
• httpAgent ： 定义在使用 http 请求时的代理。
• httpsAgent ： 定义在使用 https 请求时的代理。
• proxy ： proxy 定义代理服务器的主机名和端口。
• cancelToken ：cancelToken定义一个 cancel token 用于取消请求。

2.4 并发方法

Axios 支持并发的传输数据。

• axios.all（iterable）
• axios.spread（callback）

1
2
3
4
5
6
7
8

axios.all([
    axios.get('http://domain.com/api/user/');
    axios.get('http://domain.com/api/fruit/');
  ])
  .then(axios.spread(function (userResponse, fruitResponse) {
    console.log('User', userResponse.data);
    console.log('Fruit', fruitResponse.data);
  }));

2.5 创建一个实例

可以使用自定义设置创建一个实例，进行特定的配置，持续的使用这个实例请求数据。

1
2
3
4
5

var instance = axios.create({
    baseURL:'http://domain.com/api/',
    timeout:1000,
    headers:{'X-Custom-Header':'myself_header'}
});

2.6 全局配置

axios 支持全局默认设置

1
2
3

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

2.7 Axios 与 Jquery 比较

• Axios 支持 Node.js，Jquery 不支持
• Axios 是基于 Promise 语法标准的网络请求库，相比于 Jquery 更加小巧专业。

3. 参考

• https://github.com/mzabriskie/axios