ajax和promise的結合使用方法分享

本文主要和大家分享ajax和promise的結合使用方法，在需要依賴完成的ajax請求可使用promise保證執行順序 在第一個請求正確返回後再發送第二個請求。希望能協助到大家。

/*  定義一個使用promise的ajax請求,這裡依賴jquery  參數中請求url為必填參數*/const ajaxPromise=  param => {  return new Promise((resovle, reject) => {    $.ajax({      "type":param.type || "get",      "async":param.async || true,      "url":param.url,      "data":param.data || "",      "success": res => {        resovle(res);      },      "error": err => {        reject(err);      }    })  })}/*   第一個請求*/let step1 = () => {    ajaxPromise({      "url":"",    }).then(res => {        console.log("第一個請求正確返回==>"+res);          step2(res);      }).catch(err => {        console.log("第一個請求失敗");      })}/*   第二個請求*/let step2 = (res) => {    ajaxPromise({      "type":"get",      "url":"",      "data":{"name":res}    }).then(res => {        console.log("第二個請求正確返回==>"+res);      }).catch(err => {        console.log("第二個請求失敗==>"+err);      })}step1();

原生js寫ajaxpromise對象

const ajaxPromise =  param => {  return new Promise((resovle, reject) => {    var xhr = new XMLHttpRequest();    xhr.open(param.type || "get", param.url, true);    xhr.send(param.data || null);    xhr.onreadystatechange = () => {     var DONE = 4; // readyState 4 代表已向伺服器發送請求     var OK = 200; // status 200 代表格服務器返回成功     if(xhr.readyState === DONE){      if(xhr.status === OK){        resovle(JSON.parse(xhr.responseText));      } else{        reject(JSON.parse(xhr.responseText));      }     }    }  })}

關於promise使用時的幾點：

1. 使用方法：先建立一個promise對象new Promise(),根據業務需求判斷執行成功或失敗，成功調用resovle(),失敗則調用reject()。

2. Promise對象的then(onFulfilled，onRejected)有兩個參數，成功執行onFulfilled，失敗執行onRejectd

   p.then(function(value) {   // fulfillment成功  }, function(reason) {  // rejection失敗});//不過通常會使用catch()來捕獲失敗，上段代碼通常寫為：p.then(function(value) {    // fulfillment成功}).catch(function(reason) {    //rejection失敗})

3. Promise對象的then()會返回一個新的Promise對象

相關推薦：

小程式Promise簡化回調執行個體分享

jQuery的Promise如何正確使用

關於promise對象的簡單用法