Partager comment utiliser ajax et promettre ensemble

Cet article explique principalement comment utiliser ajax et promise ensemble. Promise peut être utilisé pour garantir l'ordre d'exécution des requêtes ajax qui doivent être complétées. Envoyez la deuxième requête après le retour correct de la première requête. J'espère que cela aide tout le monde.

/*
  定义一个使用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 écrit un objet 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));
      }
     }
    }
  })
}

---

Quelques points sur l'utilisation de promise :

1. Utilisation : créez d'abord un objet de promesse new Promise(), jugez si l'exécution est réussie ou échouée en fonction des exigences de l'entreprise, appelez resovle() en cas de succès et appelez rejet() en cas d'échec.

2. Le then(onFulfilled, onRejected) de l'objet Promise a deux paramètres, onFulfilled est exécuté avec succès et onRejectd est exécuté avec échec

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

3. L'objet Promise then() renverra un nouvel objet Promise

Recommandations associées :

Applet WeChat Promise partage d'exemple de rappel simplifié

Comment utiliser correctement la promesse de jQuery

Utilisation simple des objets de promesse

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!