web-dev-qa-db-ja.com

JSES6プロミスチェーン

Promiseの使い方を学ぼうとしていますが、連鎖を理解するのに苦労しています。このコードでは、両方のPromiseが実行されると思います。次に、test.then（）を呼び出すと、テストが解決されたことを認識し、解決データをthen（）に渡す必要があります。

その関数が終了すると、次のthen（）に進み、test2promiseで同じプロセスを繰り返します。

ただし、最初の約束の結果を印刷することしかできず、2番目の結果を印刷することはできません。ここに欠けているアイデアはありますか？

var test = new Promise(function(resolve, reject){
    resolve('done1');
});

var test2 = new Promise(function(resolve, reject){
    resolve('done2');
});

test
.then(function(data) {
    console.log(data);
})
.then(test2)
.then(function(data) {
    console.log(data);
});
javascriptpromisechaininges6-promise
9
Elliot

初の .then呼び出しはundefinedを返しますが、後続の.thenは返される約束を期待しています。したがって、コードを次のように変更する必要があります。

var test = new Promise(function(resolve, reject){
    resolve('done1');
});

var test2 = new Promise(function(resolve, reject){
    resolve('done2');
});

test
.then(function(data) {
    console.log(data);
    return test2;
})

.then(resultOfTest2 => doSomething)
.then(function(data) {
console.log(data);
});
17
Geoffrey Abdallah

thenコールバックから次のpromiseを返す必要があります。

test.then(function(data) {
    console.log(data);
    return test2;
}).then(function(data) {
    console.log(data);
});
4
madox2

連鎖を可能にするには、最初のプロミス（test1）で他のプロミス（test2）を返す必要があります。

  var test = new Promise(function(resolve, reject){
    resolve('done1');
});

var test2 = new Promise(function(resolve, reject){
    resolve('done2');
});

test
.then(function(data) {
  console.log(data);
  return test2;
});
2
JordanHendrix

概要：

Promiseを使用したpromiseチェーンの基本概念は、実行されたpromiseのすべてのthen/catchメソッドが別のpromiseを返すことです。これは次のように機能します。

  • Promiseが解決されると、thenメソッドで渡されたコールバックが呼び出されます。 thenメソッドは、コールバックで返される値を解決済みのpromiseにラップし、はこの解決済みのpromiseを返します。
  • Promiseが拒否されると、catchメソッドで渡されたコールバックが呼び出されます。 catchメソッドは、コールバックで返された値を拒否されたpromiseにラップし、はこの拒否されたpromiseを返します。

例：

複数のthenメソッドをチェーンする概念を完全に理解する前に、thenとcatchの戻り値が正確に何であるかを知ることが重要です。次の例を見てください。

_let prom1 = new Promise((res, rej) => {
  res('res');
});

const resolvedProm1 = prom1.then((val) => {return val});
// setTimeout needed for the promise to actually be resolved
setTimeout(() => console.log(resolvedProm1));

let prom2 = new Promise((res, rej) => {
  rej('rej');
});

const resolvedProm2 = prom2.catch((err) => {throw err});
// setTimeout needed for the promise to actually be rejected
setTimeout(() => console.log(resolvedProm2));_

chrome devtools：でpromiseのステータスを確認できます。

promises javascript

基本的に何が起こるかというと、thenまたはcatchコールバックでは次のようになります。

  • thenまたはcatchコールバックで返される値はすべてPromise.resolve()でラップされ、新しいresolvedpromiseが返されます。
  • thenまたはcatchコールバックでスローされたエラーは、Promise.reject()でラップされ、新しいが拒否されますpromiseが返されます。

拒否または解決されたpromiseオブジェクトが返されるため、このサイクルを繰り返して、そのオブジェクトでthenまたはcatchメソッドを再度呼び出すことができます。例えば：

_const prom = new Promise((res, rej) => {
  if (Math.random() > 0.5) {
    res('success');
  } else {
    rej('error');
  }
});

prom.then((val) => {
  return val;
}).then((val) => {
  return val
}).then((val) => {
  console.log(val)
}).catch((err) => {
  console.log('err');
})_

それぞれの順序で実行されるthenメソッドとcatchメソッドのこの呼び出しは、プロミスチェーンと呼ばれます。特に、相互のデータに依存する複数の非同期操作を実行する必要がある場合は、非同期コードの操作を簡単にするのに非常に便利な手法です。

1
Willem van der Veen

また、試してみることもできます-

    let test = new Promise(function(resolve, reject){
        resolve('done1');
    });

    let test2 = new Promise(function(resolve, reject){
        resolve('done2');
    });

    try {
        let logOne = test();
        let logTwo = test2();
        console.log(logOne);
        console.log(logTwo);
    } catch(error) {
        console.error(error);
    }

このようにして、promiseの依存関係を適切に処理することもできます。たとえば、テスト1がテスト2のデータに依存している場合、次のことができます。

try {
        let logOne = test();
        let logTwo = test2(logOne);
        console.log(logOne);
        console.log(logTwo);
    } catch(error) {
        console.error(error);
    }
0
Justin Bartholomew