Teilen Sie mit, wie Sie Ajax und Promise gemeinsam verwenden

In diesem Artikel erfahren Sie hauptsächlich, wie Sie Ajax und Promise zusammen verwenden können, um die Ausführungsreihenfolge von Ajax-Anfragen sicherzustellen, die abgeschlossen werden müssen. Senden Sie die zweite Anfrage, nachdem die erste Anfrage korrekt zurückgegeben wurde. Ich hoffe, es hilft allen.

/*
  定义一个使用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();

---

Native js schreibt ein Ajaxpromise-Objekt

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));
      }
     }
    }
  })
}

---

Ein paar Punkte zur Verwendung von Promise:

1. Verwendung: Erstellen Sie zunächst ein neues Versprechensobjekt (New Promise()), beurteilen Sie anhand der Geschäftsanforderungen, ob die Ausführung erfolgreich ist oder fehlgeschlagen ist, rufen Sie bei Erfolg resovle() auf und rufen Sie bei Fehlschlag Reject() auf.

2. The then(onFulfilled, onRejected) des Promise-Objekts hat zwei Parameter: onFulfilled wird erfolgreich ausgeführt und onRejectd wird fehlgeschlagen

   p.then(function(value) {
      // fulfillment成功
     }, function(reason) {
     // rejection失败
   });
   
   //不过通常会使用catch()来捕获失败，上段代码通常写为：
   p.then(function(value) {
       // fulfillment成功
   }).catch(function(reason) {
       //rejection失败
   })

3. Promise-Objekt then() gibt ein neues Promise-Objekt zurück

Verwandte Empfehlungen:

WeChat-Applet Promise vereinfachtes Teilen von Rückrufbeispielen

So verwenden Sie jQuerys Promise richtig

Einfache Verwendung von Promise-Objekten

Das obige ist der detaillierte Inhalt vonTeilen Sie mit, wie Sie Ajax und Promise gemeinsam verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!