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

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

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

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

Q&A

解決済

1回答

2125閲覧

javascriptのアロー関数やpromise,thenなどについてです。

Hayato1201

総合スコア220

JavaScript

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

0グッド

1クリップ

投稿2018/08/06 10:19

編集2018/08/06 10:20

awsのlamda関数を呼んでその戻り値の処理なのですが、以下の様なスクリプトがあります。

js

1fetch(url , 2 { 3 mode: "cors", 4 method: "POST", 5 headers: { 6 "Content-Type": "application/json", 7 } , 8 body: JSON.stringify(params) 9 }).then( (response) => response.json() ).then((response) => response.body) }

awsのlamda関数を呼んでそのresponseをjsonにしているという事なんでしょうが、jsにあまり慣れていなくて、このthenや=>の扱いがよく分かりません。fetchの返り値はresponseという事なのでしょうか?また、mode:やheadersで示しているものの意味もよく分からないのですが、これらはどういう事でしょうか?

ちなみにresponseは以下の様になっています。

Python

1response = { 2 "statusCode": 200, 3 "headers": { 4 "Access-Control-Allow-Origin" : "*" 5 }, 6 "body": json.dumps(body, ensure_ascii=False) 7 }

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

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

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

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

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

guest

回答1

0

ベストアンサー

fetch() の戻り値はPromiseオブジェクトです。
Promiseオブジェクトは、返ってきた時点では処理を行いません。
返ってきた Promiseオブジェクトに .then( Function() ) で処理を実行させます。
また、.then() の戻り値はPromiseオブジェクトなので、.then() はいくつも連結できます。

() => {} はアロー関数といいます。
function(arg) {return arg;}(arg) => {return arg;} のように書けます。
またこれはさらに記述を省略できる場合があり、上記の場合だと
arg => arg と書けます。

つまり .then() の引数に、

.then( function(response) { return rseponse.json(); } )

と書いているのと同じようなことです。
厳密にはthisのスコープが違ったりargumentsが使えなかったり、まったく同じではないです。
ここで、引数のresponseには、urlにアクセスして得られたレスポンス(生のレスポンスではなくfetch API
仕様で包まれたもの)が渡されてきます。
このレスポンスの.json()を実行すると、レスポンスからJSONデータを取り出すことができます。

で、2つ目のthenの引数に設定した関数の引数には、前のthenが返したものが渡されます。
つまりレスポンスのJSONデータが渡ってきます。
そのJSONデータからbodyというキーで値を取り出していることになります。

アロー関数は単純な置き換えなのでいいとして、Fetch と Promise については、重要なものですが少々理解が難しいので、しっかり勉強した方がいいと思います。

mode や headers 等、fetch API の引数については、下記URLを参照してください。
基礎的なHTTP通信のお話です。

  • Fetch

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

  • Promise

http://azu.github.io/promises-book/

  • アロー関数

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

投稿2018/08/06 11:19

編集2018/08/06 11:25
spookybird

総合スコア1803

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

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

Hayato1201

2018/08/15 07:47

返信遅くなり申し訳ないです!回答ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問