Teilen Sie mit, wie Sie Ajax und Promise gemeinsam verwenden

小云云
Freigeben: 2023-03-20 11:38:02
Original
2168 Leute haben es durchsucht

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();
Nach dem Login kopieren

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));
      }
     }
    }
  })
}
Nach dem Login kopieren

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失败
    })
    Nach dem Login kopieren
  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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage