Promiseを使った非同期処理

投稿日：2019年3月17日更新日：2020年2月9日

今回はPromiseを使った非同期処理について。

JavaScriptでの非同期処理ですが、処理1、処理２があった場合、よく言われるコールバック地獄になってしまいます。うまく関数化すればそうでもない気がしますが・・・(汗)

Promiseを使うとそれを回避することができます。

function getFunc1() {
    return new Promise((resolve, reject) => {
        $.ajax(ajaxの設定).done((data) => {
            resolve(data)
        }).fail((data) => {
            reject(data)
        })
    })
}

function getFunc2() {
    return new Promise((resolve, reject) => {
        $.ajax(ajaxの設定).done((data) => {
            resolve(data)
        }).fail((data) => {
            reject(data)
        })
    })
}

getFunc1()
.then((data) => {
   return getFunc2()
}).then((data) => {
   //func2の結果のあと
}).catch((err) => {
    console.log('サーバーとの通信に失敗しました。')
})

function getFunc1() {

return new Promise((resolve, reject) => {

$.ajax(ajaxの設定).done((data) => {

resolve(data)

}).fail((data) => {

reject(data)

})

}

function getFunc2() {

return new Promise((resolve, reject) => {

$.ajax(ajaxの設定).done((data) => {

resolve(data)

}).fail((data) => {

reject(data)

})

}

getFunc1()

.then((data) => {

return getFunc2()

}).then((data) => {

//func2の結果のあと

}).catch((err) => {

console.log('サーバーとの通信に失敗しました。')

})

ネットで検索するとsetTimeoutや簡単なサンプルの例は多かったのですが、いざ自分の必要なコードを書いて理解するとなると多少時間がかかりました。*参考URLのものが自分の求めていたイメージに一番近かったです。

実際に使う場合ほとんどAjaxがらみだと思うので、Ajaxを使ったサンプルを。

特に2回目(上記の例でいうとgetFunc2)の処理を噛ませた後の結果がどこに行くのかを理解するまで時間がかかりました。thenの中で、さらにthenで展開されます。

参考URL

Promiseで複数の非同期処理を書く