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() 就相当于我们之前写的回调函数。

resolve 和 reject

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject(&#39;out of range&#39;);
        }
    })
}
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

catch的用法

我们继续调用 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 中的回调。

all的用法

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']

race的用法

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 の前に書いたものと同等です。

解決と拒否

rrreee

Promise には 3 つの状態があります: pending (進行中)、fulfilled (成功)、 rejected (失敗)

paramTest() 例には 2 つの状況があります:

• Whennumber の場合、成功とみなされ、ステータスが pending から fulfilled に変更されます

• whennumber >= 5 の場合、これは失敗とみなされ、ステータスが pending から rejected に変更されます

paramTest() の実行結果: tr>

達成	拒否
解決	拒否されました
数値	範囲外

catch の使用法

引き続き paramTest メソッドを呼び出します (例:

rrreeecatch) code> メソッドは、実際には <code>.then(null, requestion) のエイリアスです。これは失敗を処理するために使用されるコールバック関数でもありますが、resolve コールバック エラーが発生した場合、エラーはブロックされず、<code>catch 内のコールバックが実行されます。

all

rrreee

all メソッドの使用法は、 の場合にのみ、配列内の各項目が <code>Promise オブジェクトを返します。 >p1、p2、p3 は、すべて実行されるまで then コールバックに入りません。 p1、p2、p3 によって返されたデータは、配列の形式で then コールバックに渡されます。 rrreee

race

rrreee

race の使用法は all とまったく同じですが、違いは all code> メソッドでは、パラメータ内の各項目が正常に返された場合にのみ <code>then が実行され、race ではパラメータ内の 1 つの項目が存在する限り then が実行されます。パラメータは正常に戻ります > コールバック。

以下は race の例です。all メソッドと比較すると、戻り値に明らかな違いがあることがわかります。 rrreee

この記事の例のソース コードを表示するには、ここをクリックしてください。🎜🎜resloader は、画像をプリロードし、読み込みの進行状況を表示する Promise ベースのプラグインです。詳細については、ここをクリックしてください。大丈夫だと思ったら、スターへようこそ🎜🎜関連する推奨事項: 🎜🎜🎜🎜Promise を使用してコールバックを簡素化する🎜🎜🎜🎜WeChat アプレット Promise を簡素化したコールバックの例を共有する🎜🎜🎜🎜 jQuery の Promise を正しく使用する方法🎜🎜

以上がPromiseの基本的な使い方のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。