この記事では、主に 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の使い方のいくつかのポイント:
使用方法:まずPromiseオブジェクトnew Promise()を作成し、業務に応じて実行の成功か失敗かを判断する必要な場合は、正常に resovle() を呼び出します。失敗した場合は、reject() を呼び出します。
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失败 })
Promise オブジェクトの Then() は新しい Promise オブジェクトを返します。
関連する推奨事項:
WeChat アプレット Promise の簡略化されたコールバック例の共有
以上がajaxとPromiseの使い方を一緒に共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。