目的
$.ajaxをasync awaitを用いた同期処理で書く。
Ajax通信を待ってから処理に進む。
同期処理が入れ子にならず、クリーンに書くことができる。
IEには対応していない。注意。
経緯
保守の際、既存コードがjqueryのajaxで記述されていた。
jquery自体は別に良い。
だが、大量のコールバックによる入れ子で非常に見通しが悪くなっていた。
それをasync awaitを用いた同期処理にリファクタリングをした際の備忘録である。
書き方
フルーツID🔑からフルーツ名🍒を取得する。
hoge.js
/**
* フルーツ名を取得する
*
* @param {string} fruitId
*/
async function getFruitName(fruitId) {
const fruitRequest = {id: fruitId}
const fruitResult = await ajaxGetFruit(fruitRequest);
return fruitResult.name;
}
/**
* フルーツのajax[GET]を実施する
*
* @param {object} request
* @returns
*/
function ajaxGetFruit(request) {
return new Promise((resolve, reject) => {
$.ajax({
url: '/fruit/name',
type: "GET",
async: true,
contentType: "application/json",
data: JSON.stringify(request),
dataType: "json",
}).then(
function (result) {
// 正常終了
resolve(result);
},
function () {
// エラー
reject();
}
)
}
)
}
かんたんな解説
記述場所
-
asyncは関数定義に記述する。 -
awaitは呼び出す関数の前に記述する。 - IEには対応していない。注意。
動き
-
awaitはasyncで定義された関数内でしか使用できない。 -
awaitで呼び出しされた関数がresolve、またはrejectするまで待つ。