目录

    1. 基本概念

    1.1 Ajax

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

    以 Jquery 为例:

    $.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 用于在后台与服务器交换数据。页面加载后,在后台向服务器发送数据,不需要重新加载页面就可以更新页面。

    先看个示例:

    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 使用方法别名

    先看个示例:

    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 使用配置方法

    先看个示例

    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)
    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 创建一个实例

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

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

    2.6 全局配置

    axios 支持全局默认设置

    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. 参考