どうしてもjavascriptの処理の順番を直列に出来ません。理解が出来ません。

Question

どうしてもjavascriptの処理の順番を直列に出来ません。理解が出来ません。
promiseかasync,awaitを使って、処理の順番を保証できる事を実感できるコードを教えてほしいです。
es6でお願いします。

Comments

[m.ts10806]

現在作成中のソースコードをご提示ください。 https://teratail.com/help/question-tips#questionTips3-5

Answer 1

求めているのは「逐次処理」ですか。

• 4.8. Promiseによる逐次処理 - JavaScript Promiseの本

Re: roooo さん

Answer 2

具体的にやりたいことが書いてあった方が助かるのですが、
簡単な例で言うとこんな感じでしょうか。

// fetchをreturnしているので戻って来るのはPromise
const fn = () => fetch('https://facebook.github.io/react-native/movies.json');

// fnのリターンはPromiseなのでresにはPromiseが入る
const test1 = () => {
  const res = fn();
  console.log('async', res);
}

// fnから返って来たPromiseをawaitすることでfetchの結果がresに入る
const test2 = async () => {
  const res = await fn();
  console.log('sync', res);
}

実行結果

test1();
async Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

test2();
sync Response {type: "cors", url: "https://facebook.github.io/react-native/movies.json", redirected: false, status: 200, ok: true, …}

Promiseというのは約束（予約）なので
結果を受け取るためにはawaitで待つ必要があります。

自分が持っているのがPromiseであり、その結果がほしいのであれば
awaitやPromise.allで待てばOKなので、確かめながら組めばできると思います。

Comments

[karamarimo]

fn は .then(...) 無しで
const fn = () => fetch('...')
としても全く同じではないでしょうか。

[yuki-saito]

あっそうですね。
本当はJSON.parseしていたfunctionからカットしてしまったので変な感じになってしまいました。
ありがとうございます。

Answer 3

実感できるコード

とても単純な例が以下に載っています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

async function add1(x) {
  var a = resolveAfter2Seconds(20); // これは非同期処理をPromiseで返す関数
  var b = resolveAfter2Seconds(30); // 同上
  return x + await a + await b;  // 2つの非同期処理を同期的に逐次処理する部分
}

ただ・・・このサンプルを見て雰囲気はつかめたとしても実際に書くにはやはり順番にPromise, async, awitの細々とした点の把握が必要と思います。