「Promise」の記事 - Crieit

fetchがよくわからなかったのでオレオレfetchを作って雰囲気を掴む

2019-06-09T23:58:56+09:00

前回、こんな記事を書きました。
上の記事のそもそもの発端は、fetchを使おうとしたけども、よくわからなかったからというものでした。
根本的には、fetchがわからないというよりはPromiseがよくわかってなかったという方が近いので、前回Promiseの雰囲気を掴んだ時点で7割方解決しているのだけれど、そもそもの発端を解決させようと思います。

そもそもの発端

超絶ざっくり書くと、fetchというのは下記のようになるかと。

fetch(url)
.then((response)=>{
    return response.json();
})
.then(()=>{
    //json使って何か処理
})
.catch((error)=>{
    //エラー処理
})

まあ、こんな感じのものを見て、非同期をよくわかっていなかった僕はちんぷんかんぷんになって、どうにか、fetchというのは非同期で動くものらしい、というところまではわかった。
なのでどうにかして非同期を勉強しなければいけない。
そこでググったら出てくるわけです。

const hoge = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('wait 3 sec!')
            resolve('wait 3 sec!')
        },3000)
    })
}

……。さっきまでPromiseとかresolveとかrejectとか出てこなかったじゃん。
ってなって挫折していた。
今思えば至極単純で、Promiseとかresolveとかrejectとかはfetchの中で勝手にやっていることなので、fetchを使う分には登場しない。
もちろん、理解する必要はあって、そのために今回もオレオレfetchを作ることで雰囲気を掴もうと思う。

注意

あくまで雰囲気を掴むだけです。実際の実装は微塵も知りません。
いろんなドキュメントを読んだ上での筆者の解釈（を筆者の実装レベルでできるとこだけ再現したもの）です。とんちんかんかもしれません。
妥協しまくりです。
あまりにもとんちんかんなこと言ってたら教えて下さい。
信用しないでください。
レベル不足でクソコードです。

PromiseがよくわからなかったのでオレオレPromiseを作って雰囲気を掴む

2019-06-07T00:25:00+09:00

非同期がわかりません。
「この関数はPromiseを返します」
Promiseって何だよ。
非同期やってもコールバック地獄にならないらしいけど、
結局引数に渡すのはコールバックだし、
僕からするとまーまーわからんのです。

というわけでPromiseを自作して雰囲気を掴むことにしました。

注意

あくまで雰囲気を掴むだけです。実際の実装は微塵も知りません。
いろんなドキュメントを読んだ上での筆者の解釈（を筆者の実装レベルでできるとこだけ再現したもの）です。とんちんかんかもしれません。
妥協しまくりです。
Promise.allとかやりません。それどころかPromiseチェーンすらできません。
catchは実装したけど試してません。
（要はほとんどできてないじゃないか）

あまりにもとんちんかんなこと言ってたら教えて下さい。
信用しないでください。
レベル不足でクソコードです。

とりあえずコード

とりあえずよく呼び出す側のコードです。


    
        
        オレオレPromise
        
        
    
    
        hello async

const wait = ()=>{
    const start = document.getElementById('start');
    start.style="";
    start.innerHTML += "start:" + new Date();
    hidouki().then(finish).catch(dispError);

}

const hidouki = ()=>{

    return new Promise(wait1);
    //return new oreorePromise(wait1); //こっちに書き換えても動くようになるのが目標

}

const wait1 = (resolve,reject) => {
    setTimeout(() => {
        const async1 = document.getElementById('async');
        async1.style="";
        async1.innerHTML += "wait3 sec :" + new Date();
        resolve('succeeded async');
    },3000);
}

const finish = (value) => {
    setTimeout(()=>{
        const finish = document.getElementById('finish');
        finish.style = "";
        finish.innerHTML += value + " :" + new Date();
    },5000);
}

const dispError = (error) => {
    alert(error);
}

ちゃんと待ってる。

さて、new Promiseしているところを自作Promiseに書き換えても動くようにするのが目標です。

わからんなりの実装

正直、Promiseのコンストラクタの引数はコールバック関数で、そのコールバック関数の引数はresolveとrejectで……、
って言われてわかる？　みんなすごいね！　僕はわかんないです。そのresolveとrejectはどこから来たんだよ。
ってのを試行錯誤しながら理解しようとした結果、以下のようになりました。

class oreorePromise{
    constructor(callback){
        this.value = null;
        this.state = 'pending';
        this.thenTimer = [];
        this.catchTimer = [];

        callback(this.resolve.bind(this),this.reject.bind(this));

    }

    resolve(value){
        this.value = value;
        this.state ='fulfilled';
    }

    reject(value){
        this.value = value;
        this.state='rejected';
    }

    then(nextCallback){
        this.thenTimer.push(setInterval(function(){
            if(this.state === 'fulfilled'){
                this.value = nextCallback(this.value);
                clearInterval(this.thenTimer.shift());
            }
            else if(this.state === 'rejected'){
                //待機やめる
                clearInterval(this.thenTimer.shift());
            }
        }.bind(this),100)); //テストだし100ミリ秒くらい待とう

        // https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Using_promises#Chaining
        // then 関数は元の Promise とは別の新しい Promise を返します。
        // らしいけど、もう力尽きた…。
        return this;
    }

    catch(errorCallback){
        this.catchTimer.push(setInterval(function(){
            if(this.state === 'fulfilled'){
                //待機やめる
                clearInterval(this.catchTimer.shift())
            }
            else if(this.state === 'rejected'){
                errorCallback(this.value);
                clearInterval(this.catchTimer.shift())
            }
        }.bind(this),100));
    }
}

JavaScriptのthisがわかんなくて、ただでさえわからないのにコールバックしまくってthisが迷子になって結構しんどかった。一応動いたけど。
Promiseよりthisの方が難しかった。
だれかthis教えて。

resolveとrejectはPromiseオブジェクトが持つメソッドで、
「コンストラクタに引数として渡したコールバック関数を実行するときに、resolveとrejectを引数として実行しますよ。
なので、実行したい関数を定義するときにresolveとrejectが引数になるように定義してくださいね」
というお約束だということが自分で書いてようやくわかった。

わかってからだと、ちゃんと書いてあることがわかる。なぜ最初から見つけられないのだ。

どこかの解説記事で、
「resolve関数を実行するとthenメソッドが呼び出される」
とか書いてあって腑に落ちなかったんだけど、たぶん、正しいのは、
「thenメソッドは即座に呼ばれていて、オブジェクトの持つ状態（oreorePromiseではプロパティstate）がfulfilledになるまで、引数として渡されたコールバック関数の実行を待つ」
なんだと思う。
（自信はない）
resolveは状態を変更しているだけで、別にthenに渡された関数を実行しているとかはない、と思う。（ここは特に自信ない）

最初にそう言う説明を見てしまったのでthenメソッドが魔法のように見えてしまっていたのだけれど、
（MDNで「さあ魔法の時間です。」とか言ってるしね！）
よく見ればobject.method()という至極基本的な文法だし、即座に呼ばれて当然だよなと。

このコードでは、状態が変わるまでsetIntervalでループしてるのは最高にダサいと思うけど、本質とずれるのであまり凝ってない。

できたので書き換えてみる

const hidouki = ()=>{

    //return new Promise(wait1);
    return new oreorePromise(wait1); //こっちに書き換えても動くようになるのが目標

}

動いた。

まとめ

ドキュメントを見返して、ソースを見返す度に「あ、ここ違うな」ってなる。
ただ、重ね重ねだけど、雰囲気を掴んでPromiseを使えるようになるのが目的で、Promiseのコピーを作りたいとかではない。
せめてPromiseチェーンは実装したかったけど、費用対効果が薄すぎてやめた。
個人的には

resolveとrejectはPromiseオブジェクトが持つメソッドで、
「コンストラクタに引数として渡したコールバック関数を実行するときに、resolveとrejectを引数として実行しますよ。
なので、実行したい関数を定義するときにresolveとrejectが引数になるように定義してくださいね」
というお約束だということが自分で書いてようやくわかった。

どこかの解説記事で、
「resolve関数を実行するとthenメソッドが呼び出される」
とか書いてあって腑に落ちなかったんだけど、たぶん、正しいのは、
「thenメソッドは即座に呼ばれていて、オブジェクトの持つ状態（oreorePromiseでは変数名state）がfulfilledになるまで、引数として渡されたコールバック関数の実行を待つ」
なんだと思う。
（自信はない）

ここが理解できた時点でもういいかって感じ。おまけで完成させた。

まとめ2

みんな、async/await使おうぜ！

まとめ3

だれかthis教えて

非同期がわからないのはゲシュタルト崩壊を起こしていたからだ

2019-02-16T11:42:15+09:00

ということに気が付いた。

すげーあほなこといってます。

よくある？サンプル

fetch(url)
.then(function(response){
    //fetchで返ってきたデータをjson形式にする
    return response.json();
})
.then(function(json){
    //jsonで何か処理する
    doSomething(json);
})
.catch(function(error){
    //エラー発生
    console.log(error);
})

（async/await使えよって指摘はごもっともなんですが……）
初見で見たときすごい未知の呪文に見えたんですね。
で、なんとなく真似てやってみても、ちょっと変えようとすると動かない、みたいな。
めっちゃ変な書き方しちゃう、みたいな。

「thenはメソッドで引数にコールバックを指定します。」
ただこれだけなのに、なぜか謎の呪文に見えていた時期があった。

アホの極み

というか今までthenのメソッドチェーンが特殊な記法に見えていたんだけど、これって
（fetchが返す）Promiseオブジェクトが持つthenメソッド
じゃん。普通の書き方じゃん。A.B()じゃん。PHP風に書くとA->B()じゃん。
え、なんでこんなこと今まで気づかなかったの、俺。馬鹿じゃん。

たぶん、メソッドの引数がコールバックで、しかも無名関数で書かれているから、その時点でちょっと複雑になって、
しかも括弧と波括弧とfunctionがゲシュタルト崩壊起こして謎の呪文に見えていたんだな。きっと。
実際はもっと処理が書いてあって複雑だし。

あと、メソッドの部分で改行するのも馴染みがない。
そりゃ、長くなるからわかるんだけども、なんか、ねえ……。
だって、

mojiretsu
.substring(0,5);

とか普通書かないじゃん。
（意外と書くのかな？）

なんかこの辺、コーディング規約とかあるのかな？

ということで書き直す

function convertToJson(response){
    //fetchで返ってきたデータをjson形式にする
    return response.json();
}

function doSomething(json){
    //json使って何か処理する
    doSomething(json);
}

function addErrorLog(error){
    //エラー発生
    console.log(error);
}

fetch(url).then(convertToJson).then(doSomething).catch(addErrorLog);

（アロー関数使えって指摘はごもっともなんですけどね……）
これならもっと理解早かったわ、きっと。
まあ、この次にPromiseとかコールバックを理解するっていう壁があるんですけどね。
thenメソッドに渡したコールバック関数の引数って何だよ、とか。
その辺は別の記事で書くかもしれない。

教訓

サンプルがわからないときは自分がわかるように分解・再構築するとわかりやすいかも。
アロー関数がわからない（慣れてない）ならfunctionに直すとか。
(アロー関数は覚える必要があるという前提で。というか、こういう作業をやっていくと覚えやすいのでは)
無名関数でゲシュタルト崩壊起こすなら、別関数に切り出すとか。
あとは、まあ、いろいろ。

まあ、わからないから勉強しようとして、それがわからないんだから、直すのも一苦労だろうけど。
わかるところから分解するしかないよなー。

当たり前だけど、自分で手を動かさなきゃわからんよね。

以上