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

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

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

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

解決済

【JavaScript】fetch then の綺麗な書き方

true_colors_20
true_colors_20

総合スコア21

JavaScript

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

2回答

0リアクション

0クリップ

284閲覧

投稿2022/09/08 07:04

質問

jsで複数の関数でfetchを使い、getやpostをしています。

サンプルコードでは、getの関数getAllId()、putの関数execution()、それらの関数を実行している関数init()に分けています。

今の書き方だと、init() の中のthen()などが入れ子になりすぎて可読性に欠けると思っています。

このようなことをしたい場合、どのように書くべきなのか教えて頂きたいです。

js

javascript

class Api { constructor(_parm) { // APIトークン(仮。実際はenvなどに記載する想定です) this.apiToken = 'xxxxxxxxxxxxxxxx'; } /** * 全てのIDを取得(GETメソッド) * {[id: 1, hoge: xxx], [id: 2, hoge: yyy]}のようなデータが返ってくる想定 * @returns Array 全てのID */ async getAllId() { const url = 'https://xxxxxxxxxxxxx'; const options = { method: 'GET', headers: { Accept: 'application/json', 'x-chatworktoken': this.apiToken } }; const response = await fetch(url, options); return response.json(); } /** * IDを元に何かを実行(PUTメソッド) */ async execution(_id) { const url = `https://xxxxxxxxxxxxx/${_id}`; const options = { method: 'PUT', headers: { Accept: 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', 'x-chatworktoken': this.apiToken } }; const response = await fetch(url, options); return response.json(); } init() { this.getAllId() .then(_datas => { const arrayIds = _datas.map(_data => _data.id); arrayIds.forEach(_id => { this.execution(_id) .then(_res => { console.log(_res); }) .catch((error) => { console.error('Error:', error); }); ; }); }) .catch((error) => { console.error('Error:', error); }); } } const api = new Api(); api.init();

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/09/08 07:19

こちらの質問が他のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

int32_t

2022/09/08 07:38

init() で async/await を使わないのは何か理由があるのでしょうか。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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