Ajax 사용법과 Promise를 함께 공유합니다

이 기사에서는 주로 Ajax와 Promise를 함께 사용하는 방법을 공유하여 완료해야 하는 Ajax 요청의 실행 순서를 보장할 수 있습니다. 첫 번째 요청이 올바르게 반환된 후 두 번째 요청을 보냅니다. 그것이 모두에게 도움이 되기를 바랍니다.

/*
  定义一个使用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() 객체를 생성하고, 비즈니스에 따라 실행이 성공할지 실패할지 판단합니다. 필요하고 성공적으로 resovle()을 호출하고, 실패하면 거절()을 호출합니다.

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. Then()은 새로운 Promise 객체를 반환합니다.

관련 권장 사항:

WeChat 애플릿 Promise 단순화된 콜백 예제 공유

jQuery의 Promise를 올바르게 사용하는 방법

Promise 개체의 간단한 사용법에 대해

위 내용은 Ajax 사용법과 Promise를 함께 공유합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!