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
8
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¶m2=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
4
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