在需要依賴完成的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物件