はじめに

フロントエンドとバックエンドの分離開発モデルの時代では、フロントエンドからバックエンドへのデータの要求は、少し複雑なビジネスでは、コールバックがネストされるシリアルインターフェイスの場合に遭遇する可能性があり、コールバックが深すぎるため、コードの保守性の低下につながるため、コールバックが深すぎるソリューションの必要性：プロミス。 ES6のプロミス構文は深い、この記事では、最も紹介します。ES6のpromise構文は奥が深いです、この記事では、最も一般的に使用されるpromise関連の知識の作業のみを紹介します。

目次

主な記事

Promise

1. コールバックの名前と順序の標準化
2. より読みやすいコードのためにコールバック地獄を拒否
3. エラーをキャッチするのにとても便利

新しいプロミスの作り方

var promise = new Promise(function(resolve, reject) {
 // ... some code
 if (/* 非同期操作の成功*/){
 resolve(value);
 } else {
 reject(error);
 }
});

Promiseの使い方.prototype.then

thenメソッドは2つの関数を引数として受け取りますが、成功コールバックのみを記述し、失敗コールバックをcatch

//bad
promise.then(successFn,errorFn)
//good
promise.then(successFn).catch(errorFn)
let p1 = new Promise((resolve, reject) => {
 resolve(' ')
 reject(' ')
})
p1.then((result) => {console.log(result)}).catch((result) => {console.log(result)})

Promiseの使い方.all

Promise.allは複数のPromiseインスタンスを新しいPromiseインスタンスにラップすることができます。successは結果の配列を返し、failureは最初に拒否された失敗状態の値を返します。

let p1 = new Promise((resolve, reject) => {
 resolve(' ')
})
let p2 = new Promise((resolve, reject) => {
 resolve('success')
})
let p3 = Promse.reject(' ')
Promise.all([p1, p2]).then((result) => {
 console.log(result) //[' ', 'success']
}).catch((error) => {
 console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
 console.log(result)
}).catch((error) => {
 console.log(error) // 失敗は' '
})

Promse.allは、複数の非同期処理を扱う場合に非常に便利です。例えば、2つ以上のajaxのデータがページに戻ってくるのを待ってから、それを適切に表示する必要がある場合、この場合、ローディングアイコンだけが表示されます。

let wake = (time) => {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve(`${time / 1000}秒単位で起床する`)
 }, time)
 })
}
let p1 = wake(3000)
let p2 = wake(2000)
Promise.all([p1, p2]).then((result) => {
 console.log(result) // [ '3秒単位で起床する', '2秒単位で起床する' ]
}).catch((error) => {
 console.log(error)
})

ここで重要なのは、Promise.allによって得られた成功結果の配列のデータの順番は、Promise.allによって受け取った配列の順番と同じであること、つまり、p1の結果がp2の結果よりも後に得られたとしても、p1の結果が最初に来ることです。これは大きなメリットをもたらします。フロントエンド開発でデータをリクエストする過程で、複数のリクエストを送信し、リクエストの順番に従ってデータを取得・利用する場面に遭遇することがありますが、Promise.allを利用することでこの問題を解決できることは間違いありません。

Promiseの使い方.race

その名の通り、Promise.raceはレースを意味します。つまり、Promise.race([p1,p2,p3])内のどちらの結果が早く得られたとしても、その結果自体が成功状態であるか失敗状態であるかに関わらず、その結果が返されます。

let p1 = new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('success')
 },1000)
})
let p2 = new Promise((resolve, reject) => {
 setTimeout(() => {
 reject('failed')
 }, 500)
})
Promise.race([p1, p2]).then((result) => {
 console.log(result)
}).catch((error) => {
 console.log(error) // オープンな'failed'
})