最近なるべくjQueryではなくバニラJSを書くように心がけている私ですこんにちは。
Javascriptって、大体は書いた順に上から処理してくれるイメージですが
実は同時進行タイプ（正しくは非同期言語）なのでちょっと時間のかかる処理を挟むと、他の処理を先に進めてしまう。

でもそれじゃ困るのよ！
絶対にこの処理は全てが片付いてから実行してほしいの！！！！

というときに使える武器の一つ「Promise」オブジェクトについてのメモ。

Promise 雛形

new Promise((resolve) => {

//先に終わらせたい内容

　　　　resolve();　　//無事処理が終わったことを伝える

})
.then(() => {

// 全てが片付いてから実行したい内容

});

new Promise の中に、先に処理したい内容を入れます。
最後にresolve()を入れ、処理が終わったことを伝えます。
resolveが返されるとthenの中身が実行されます。

最初、resolveの必要性が全く分からず書かずにいたら
（処理が終わったら書かずとも返されると思ってた）
thenに進まず苦しみました。resolveは入れてあげましょう・・・

ちなみに resolve('処理が終わったよ！') と引数を設定すると
then((val) => { console.log(val) });
これでコンソールに「処理が終わったよ！」とresolveの中身を出すこともできます。

Promiseは成功と失敗で分岐できる

先程「resolve」を使いましたが、これ実は処理が成功したときのお返事。
失敗したときのステップも設定できるのがPromiseオブジェクトの良いところ。

new Promise((resolve, reject) => {
// 処理したい内容

    if( 処理が成功したら ){
        resolve();
    } else {
        reject();
    }
})
.then(() => {
    // 処理成功後に走らせたい内容
})
.catch(() => {
    // 処理失敗後に走らせたい内容
});

※ ifの分岐はサンプルです。
    request.status === 200 なら成功、とかその時々に応じて・・・

流れ

下記の組み合わせで動きます。
処理が成功　・・・　resolved　➛　then
処理が失敗　・・・　rejected　➛　catch

他にも色々

async/awaitと組み合わせたり、Promise.allやらPromise.raceやら
便利機能盛りだくさんのPromiseオブジェクト。
コールバックに依存せず、必要に応じて使っていこうと思います。
コツを掴むまでがとても分かりづらかった・・・