1.概要
久しぶりに JS を書いた際にPromiseの実装をすっかり忘れていたので備忘録として残しておきます。
外部のAPIを叩いてそのレスポンスを処理する という処理を想定しています。
2.実装
Promiseの使い方を忘れていたのでいろんなパターンを書いて実行してみました!
https://github.com/smoto-shei/Vue/blob/master/ProcessDemo/src/components/ProcessDemo.vue
↓一番わかりやすくて簡単だと思ったコードがこちらです。
fakeAPI()は外部のAPIをを叩くことを想定し、setTimeoutでレスポンスに1秒かかるようにしています。
buyApple5 はAPIのレスポンス結果を処理する関数を想定しています。
// OK 疑似的 API
fakeAPI(payment) {
// プロミスを作る
return new Promise(function(okFunc, ngFunc) {
setTimeout(function() {
if (payment >= 150) {
okFunc(payment - 150);
} else {
ngFunc("金額がたりません");
}
}, 1000);
});
},
// 8番目のボタン
async buyApple5() {
// await は Promise の値が取り出されるまでまつ
// 処理に失敗した場合(==ngFuncが帰って来た場合)は catch に入る
const self = this;
try {
var status = await self.fakeAPI(1000);
console.log("残りの金額は", status, "円です");
} catch (error) {
console.log(error);
}
}
3.最後に
より良い実装があればご教授いただきたいです><
TypeScript を使えばもっと簡単にかけるのかしら