放下Axios，手寫純原生Ajax通訊接口

前言

axios做爲vue框架中最經常使用的ajax工具包之一，能夠與後臺API接口進行通訊，傳送或接收數據，在先後端分離開發中，發揮了通訊橋樑的重要做用。

雖然像axios這樣的第三方工具包很好用，可是這類工具包並不能很好地幫助前段開發人員，尤爲是新人理解JavaScript原生的ajax通訊機制。

所以，本文將經過JS原生的ajax通訊實例，爲讀者詳細介紹原生ajax通訊機制和使用方法。

關於Ajax

1999年，微軟公司發佈 IE 瀏覽器5.0版，第一次引入新功能：容許 JavaScript 腳本向服務器發起 HTTP 請求。這個功能當時並無引發注意，直到2004年 Gmail 發佈和2005年 Google Map 發佈，才引發普遍重視。2005年2月，AJAX 這個詞第一次正式提出，它是 Asynchronous JavaScript and XML 的縮寫，指的是經過 JavaScript 的異步通訊，從服務器獲取 XML 文檔從中提取數據，再更新當前網頁的對應部分，而不用刷新整個網頁。後來，AJAX 這個詞就成爲 JavaScript 腳本發起 HTTP 通訊的代名詞，也就是說，只要用腳本發起通訊，就能夠叫作 AJAX 通訊。W3C 也在2006年發佈了它的國際標準。

具體來講，Ajax 包括如下幾個步驟。

1. 建立 XMLHttpRequest
2. 實例發出 HTTP
3. 請求接收服務器傳回的數據
4. 更新網頁數據

簡單來講，Ajax 經過原生的XMLHttpRequest對象發出 HTTP 請求，獲得服務器返回的數據後，再進行處理。

建立Ajax通訊接口

如圖所示，本文將採用封裝輸出Axios通訊接口的方式，封裝原生的Ajax通訊接口，方便讀者對二者的實際應用進行對比。

1. 生成通訊接口

首先，咱們須要封裝一個相似Axios的通訊接口，該接口將XMLHttpRequest對象封裝在promise對象中。

具體代碼以下：

const ajax = function({
    // 定義接口參數
    method = 'GET', // 請求方式：get, post, put, delete 
    url = '', // 請求鏈接
    data = null, // post data
    params = null, // get params
    baseURL = '', // domain URL
    withCredentials = false // api驗證請求
} = {}) {
    const promise = new Promise(function(resolve, reject) {
        // api url
        let apiUrl = baseURL + url;
        // create get params
        if (params) {
            let urlParams = [];
            for (let key in params) {
                urlParams.push(`${key}=${params[key]}`)
            }
            apiUrl += `?${urlParams.join('&&')}`;
        }
        // access
        const accessHandler = function() {
            // readState === 4, 表示api接口請求完成
            if (this.readyState !== 4) {
                return;
            }
            // 根據status狀態碼進行相關操做
            if (this.status === 200) {
                resolve(JSON.parse(this.response));
            } else {
                reject(new Error(this.statusText));
            }
        };
        // error
        const errorHandler = function() {
            console.error(this.statusText);
        };
        // timeout
        const timeoutHandler = function() {
            console.error(`The request for ${apiUrl} timed out.`);
        };
        // client
        const client = new XMLHttpRequest(); // 生成XMLHttpRequest實例對象
        client.open(method, apiUrl, true); // 配置client參數
        // status
        client.onreadystatechange = accessHandler; // 請求成功
        client.ontimeout = timeoutHandler; // 請求超時 
        client.onerror = errorHandler; // 請求錯誤
        // config
        client.responseType = "json"; // 返回值：json
        client.timeout = 10 * 1000; // 超時時間：10s
        client.withCredentials = withCredentials; // 設置驗證
        client.setRequestHeader("Accept", "application/json"); // 設置請求頭
        // send
        client.send(data); // 發生請求

    });

    return promise; // 輸出promise對象
};

export { ajax }
複製代碼

2. 封裝通訊接口

將原生Ajax接口其進行封裝，方便在vue項目中使用。

具體代碼以下：

// 配置API接口地址
const root = ''

// 引入原生Ajax
import { ajax } from './ajax'

// 自定義判斷元素類型JS
function toType(obj) {
    return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}

// 參數過濾函數
function filterNull(params) {
    for (let key in params) {
        if (params[key] === null) {
            delete params[key]
        }
        if (toType(params[key]) === 'string') {
            params[key] = params[key].trim()
        } else if (toType(params[key]) === 'object') {
            params[key] = filterNull(params[key])
        } else if (toType(params[key]) === 'array') {
            params[key] = filterNull(params[key])
        }
    }
    return params
}

// 封裝Ajax接口

function apiAjax(method, url, params, success, failure) {
    if (params) {
        params = filterNull(params)
    }
    ajax({
            method: method,
            url: url,
            data: method === 'POST' || method === 'PUT' ? params : null,
            params: method === 'GET' || method === 'DELETE' ? params : null,
            baseURL: root,
            withCredentials: false
        })
        .then(function(res) {
            if (success) {
                success(res)
            }
        })
        .catch(function(err) {
            if (failure) {
                failure(err)
            } else {
                throw err;
            }
        })
}

// 返回在vue模板中的調用接口
export default {
    get: function(url, params, success, failure) {
        return apiAjax('GET', url, params, success, failure)
    },
    post: function(url, params, success, failure) {
        return apiAjax('POST', url, params, success, failure)
    },
    put: function(url, params, success, failure) {
        return apiAjax('PUT', url, params, success, failure)
    },
    delete: function(url, params, success, failure) {
        return apiAjax('DELETE', url, params, success, failure)
    }
}
複製代碼

調用Ajax通訊接口

完成Ajax接口封裝後，在main.js文件中直接引入。

import ajaxApi from './api/ajaxApi'

Vue.prototype.$ajaxApi = ajaxApi
複製代碼

最後，在vue頁面進行使用。

created() {
    this.getDataFromApi();
  },
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    getDataFromApi() {
      this.$ajaxApi.get(
        "/data/tableData", // mock 數據接口
        null,
        Response => {
          this.tableData = Response;
          console.log(Response);
        },
        Error => {
          throw Error;
        }
      );
    }
  }
複製代碼

具體效果以下圖。

總結

相信經過本文，你對原生ajax通訊已經有了必定的瞭解。須要提醒的是，本文實例是本人根據mock數據接口編寫的，所以，在通用性上面，可能有所不足。若是你想直接使用本文實例，可能須要根據你實際調用的接口進行調整。

固然，你也能夠直接訪問本人的github項目，項目地址：github.com/jiangjiahen…。

最後，祝工做順利，生活愉快。