首頁  >  文章  >  web前端  >  promise如何封裝ajax? promise封裝ajax的實作方法

promise如何封裝ajax? promise封裝ajax的實作方法

不言
不言原創
2018-09-19 17:36:013304瀏覽

這篇文章帶給大家的內容是關於promise如何封裝ajax? promise封裝ajax的實現方法,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

先貼上程式碼

var ajaxOptions = {
    url: 'url',
    method: 'GET',
    async: true,
    data: null,
    dataType: 'text',
}

function ajax(protoOptions) {
    var options = {};

    for(var i in ajaxOptions){
        options[i] = protoOptions[i] || ajaxOptions[i];
    }
    

    return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();

        xhr.open(options.method, options.url, options.async);

        xhr.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                resolve(this.responseText, this);
            } else {
                var resJson = {
                    code: this.status,
                    response: this.response
                }
                reject(resJson, this)
            }
        }

        xhr.send()

    })
}

「註解:

1,open(method, url, async) 

#  method:  GET和POST;

  url: 傳送到服務端的url;

  async: 非同步true,同步false;

#2,on#read #  每當readyState的值變化,onreadystatechange函數會自動執行

3,readyState 伺服器回應的狀態資訊

    0: 請求未初始化
  • 1: 伺服器連線已建立
  • 2: 要求已接收
  • 3: 請求處理中
  • 4: 請求已完成,且回應已就緒
  •   當readyState的值為4,status狀態為200時表示對應已就緒,可執行成功調用的方法,反之呼叫失敗呼叫的方法

以上是promise如何封裝ajax? promise封裝ajax的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn