質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

2回答

4261閲覧

順番に実行されるようにしたい

inukujira

総合スコア130

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

1クリップ

投稿2019/08/16 11:01

すいません。
教えてください。

await/asyncを利用して順番に処理が行われるようにしたいです。
しかし、どうやっても非同期処理となり処理結果がバラバラで返ってきます…。

どのようにすれば同期処理として実行する事が出来るのでしょうか?

■ デモ環境
https://stackblitz.com/edit/angular-x2efpo?file=src/app/app.component.ts

■ 実際のソース

TypeScript

1 main = async () => { 2 await this.one() 3 await this.two() 4 await this.three() 5 } 6 7 push() { 8 this.main(); 9 } 10 11 one() { 12 setTimeout(() => { 13 console.log('1つめの処理') 14 }, 1000) 15 } 16 17 two() { 18 console.log('2つめの処理') 19 } 20 21 three() { 22 setTimeout(() => { 23 console.log('3つめの処理') 24 }, 1000) 25 }

■ 実行結果
イメージ説明
どなたかご教示頂ければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/08/16 12:17

質問タイトルには主語を入れてください。
guest

回答2

0

thenをつかってはどうでしょうか?

js

1one() 2.then(() => two()) 3.then(() => three()) 4

投稿2019/08/16 13:34

編集2019/08/16 13:35
Nippun

総合スコア1147

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

inukujira

2019/08/17 02:01

回答ありがとうございました。 別のやり方で実装できましたのでご報告いたします!
guest

0

ベストアンサー

await method() の構文は、method() の返り値が Promise オブジェクトの場合にその結果が解決されるまで待つ構文です。

したがって、one()three() メソッドの返り値は Promise オブジェクトにしなければなりません。

たとえば、 one() メソッドは以下のように書き換えます。

typescript

1// one() { 2// setTimeout(() => { 3// console.log('1つめの処理') 4// }, 1000) 5// } 6one() { 7 return new Promise((resolve, reject) => { 8 setTimeout(() => { 9 console.log('1つめの処理') 10 resolve() 11 }, 1000) 12 }) 13}

new Promise(callback) で Promise オブジェクトを生成し、非同期の処理が終了したタイミングで callback の第一引数に与えられた resolve 関数を実行します。

two() のように即座に結果を解決する場合は、以下のように書くこともできます。

typescript

1two() { 2 return Promise.resolve(console.log('2つめの処理')) 3}

参考 > Promise - JavaScript | MDN

投稿2019/08/16 12:42

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

inukujira

2019/08/17 02:01

ありがとうございました! この方法で解決しました^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問