ajaxとPromiseの使い方を一緒に共有する

小云云
リリース: 2023-03-20 11:38:02
オリジナル
2168 人が閲覧しました

この記事では、主に ajax と Promise を併用する方法について説明します。Promise は、完了する必要がある ajax リクエストの実行順序を保証するために使用できます。 最初のリクエストが正しく返された後に 2 番目のリクエストを送信します。皆さんのお役に立てれば幸いです。

/*
  定义一个使用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) には 2 つのパラメーターがあり、OnFulfilled が正常に実行され、onRejectd は失敗した場合に実行されます。

    p.then(function(value) {
       // fulfillment成功
      }, function(reason) {
      // rejection失败
    });
    
    //不过通常会使用catch()来捕获失败,上段代码通常写为:
    p.then(function(value) {
        // fulfillment成功
    }).catch(function(reason) {
        //rejection失败
    })
    ログイン後にコピー
  3. Promise オブジェクトの Then() は新しい Promise オブジェクトを返します。

関連する推奨事項:

WeChat アプレット Promise の簡略化されたコールバック例の共有

jQuery の Promise を正しく使用する方法

Promise オブジェクトの簡単な使用方法について


以上がajaxとPromiseの使い方を一緒に共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート