ホームページ > 記事 > ウェブフロントエンド > Promiseの基本的な使い方のチュートリアル
この記事では主に、Promise の使用方法に関する基本的なチュートリアルを共有します。私の個人的な理解は、同期プログラミングを使用して非同期プログラミング操作を完了することです。皆さんのお役に立てれば幸いです。
const promise = new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); });
Promise
は関数をパラメーターとして受け取ります。この関数には 2 つのパラメーターがあり、resolve
と reject
はそれぞれ非同期後の成功したコールバック関数を表します。操作が実行され、失敗時のコールバック関数が返されます。 Promise
接收一个函数作为参数,函数有两个参数,resolve
和 reject
分别表示异步操作执行后成功的回调函数和失败的回调函数。
Promise
实例后马上执行。所以通常采用一个函数包含它
function runAsync() { return new Promise((resolve, reject) => { //some asynchronous code setTimeout(() => { console.log('执行完成'); resolve('some data'); }, 2000); }); } runAsync().then((data) => { console.log(data);//可以使用异步操作中的数据 })
runAsync()
执行完调用 then
方法,then()
就相当于我们之前写的回调函数。
function paramTest(){ return new Promise((resolve, reject) => { let number = Math.ceil(Math.random() * 10); if (number < 5) { resolve(number); }else{ reject('out of range'); } }) } paramTest().then((number) => { console.log('resolved'); console.log(number); },(reason) => { console.log('rejected'); console.log(reason); })
Promise
有三种状态:pending
(进行中)、fulfilled
(已成功)和 rejected
(已失败)
paramTest()
例子有两种情况:
当 number < 5
时,我们认为是成功情况,将状态从 pending
变为 fulfilled
当 number >= 5
时,我们认为是失败情况,将状态从 pending
变为 rejected
所以paramTest()
的执行结果:
fulfilled | rejected |
---|---|
resolved | rejected |
number | out of range |
我们继续调用 paramTest
方法举例
paramTest().then((number) => { console.log('resolved'); console.log(number); console.log(data); //data为未定义 },(reason) => { console.log('rejected'); console.log(reason); }).catch((err) => { console.log(err); })
catch
方法其实就是 .then(null, rejection)
的别名,也是用来处理失败失败的回调函数,但是还有一个作用:当 resolve
回调中如果出现错误了,不会堵塞,会执行 catch
中的回调。
const p = Promise.all([p1, p2, p3]); p.then(result => { console.log(result); })
all
方法接收一个数组参数,数组中每一项返回的都是Promise
对象,只有当p1, p2, p3
都执行完才会进入then
回调。p1, p2, p3
返回的数据会以一个数组的形式传到then
回调中。
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.all([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //3秒后输出['p1', 'p2']
const p = Promise.race([p1, p2, p3]); p.then(result => { console.log(result); })
race
的用法与all
如出一辙,不同的是all
方法需要参数的每一项都返回成功了才会执行then
;而race
则是只要参数中的某一项返回成功就执行then
回调。以下是
race
的例子,和all
Promise
はインスタンス化された直後に実行されます。したがって、通常はそれを含めるために関数が使用されます
const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p1'); }, 1000); }) .then(result => result) .catch(e => e); const p2 = new Promise((resolve, reject) => { setTimeout(() => { resolve('p2'); }, 3000); }) .then(result => result) .catch(e => e); Promise.race([p1, p2]) .then(result => console.log(result)) .catch(e => console.log(e)); //1秒后输出 'p1'
runAsync()
実行後、then
メソッドが呼び出され、then()
がCallback の前に書いたものと同等です。
Promise
には 3 つの状態があります: pending
(進行中)、fulfilled
(成功)、 rejected
(失敗)
paramTest()
例には 2 つの状況があります:
pending
から fulfilled
に変更されます
pending
から rejected
に変更されますparamTest()
の実行結果: 達成 | 拒否 | tr>
---|---|
解決 | 拒否されました |
数値 | 範囲外 |
引き続きparamTest
メソッドを呼び出します (例:all
rrreeeall
メソッドの使用法は、の場合にのみ、配列内の各項目が <code>Promise
オブジェクトを返します。 >p1、p2、p3 は、すべて実行されるまでthen
コールバックに入りません。p1、p2、p3
によって返されたデータは、配列の形式でthen
コールバックに渡されます。 rrreeerace
rrreeerace
の使用法はall
とまったく同じですが、違いはall code> メソッドでは、パラメータ内の各項目が正常に返された場合にのみ <code>then
が実行され、race
ではパラメータ内の 1 つの項目が存在する限りthen
が実行されます。パラメータは正常に戻ります > コールバック。 この記事の例のソース コードを表示するには、ここをクリックしてください。🎜🎜resloader は、画像をプリロードし、読み込みの進行状況を表示する Promise ベースのプラグインです。詳細については、ここをクリックしてください。大丈夫だと思ったら、スターへようこそ🎜🎜関連する推奨事項: 🎜🎜🎜🎜Promise を使用してコールバックを簡素化する🎜🎜🎜🎜WeChat アプレット Promise を簡素化したコールバックの例を共有する🎜🎜🎜🎜 jQuery の Promise を正しく使用する方法🎜🎜
以上がPromiseの基本的な使い方のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。