javascriptのasync awaitについてメモ

typescriptをやってPromiseの存在を知った。がPromiseという概念が未だに分からない。。。

少し触ってみて多少のasyc awaitを使う場合と使わない場合で何か異なることを発見したので備忘録としてメモしておく。

async await を使わない場合

private uploadImage(event: Event): void{
    const url = 'http://localhost:8000/myapp/image/'
    const sss = axios.get(url);
    console.warn(typeof (sss));
    console.warn(sss);

// 結果
object
Promise {<pending>}

//ちなみにPromiseの内部
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Object

で、このPromiseResultの内部にdataプロパティとかを有するオブジェクトが含まれていた。

//その内部
config: {url: "http://localhost:8000/myapp/image/", method: "get", headers: {…}, transformRequest: ...
data: {result: "success"}
headers: {content-length: "20", content-type: "application/json"} 
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: ...
status: 200
statusText: "OK"
__proto__: Object

重要なのはPromiseにPromiseResultが含まれていて、その内部にconfig, data, headers等が含まれている事実だ。

async awaitを使う場合

ちなみにasync awaitは何なのかはよく分かっていないが、使い方のイメージは理解している。関数名またはメソッド名にasyncを使い、通信を行う時にawaitを付帯して通信するコードを書く。

private async uploadImage(event: Event): void{
    const url = 'http://localhost:8000/myapp/image/'
    const sss = await axios.get(url);
    console.warn(typeof (sss));
    console.warn(sss);

//結果
object
{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

typeはobjectと表示されるが、2つめのコンソールに表示されるのはおそらくPromiseResultであると思われる。中身が同じであるからそうだろう。

つまり？

async awaitを使わないと通信を行った際に返される値がPromise型を受け取り、PromiseResultを引っ張ってくるためにthen()等を使っていた。
しかしながらasync awaitを使うとPromiseResultが返される。したがってそのままdataプロパティを使ってレスポンスの内容を引っ張り上げる事ができる。