promiseとは
非同期処理をより簡単に、読みやすくするための方法として存在しています。
非同期処理をpromiseなしで記述した場合、
どのくらいめんどくさいかは以下の記事で記述しておきます。（ベージ下部分）
https://qiita.com/gucho-n/items/93eac48bac8e0a8cfa72
書き方
promiseの基本形
new Promise(function(resolve,reject){}
).then(
).catch(
).finally(
);
説明
①.第一引数resolveと第二引数rejectはコールバック関数
②-1.resolveが呼ばれると
* 1.then()が実行される
* 2.finally()が実行されて終了する
②-2.rejectが呼ばれると
* 1.catch()が実行される
* 2.finally()が実行されて終了する
☆thenの中でエラーを生成するとcatch()に飛ぶ
then(
// throw new Error
)
point
finallyは必ず実行される！
例
new Promise(function(resolve, reject) {
console.log('promise');
// reject("bye");
setTimeout(function() {
resolve("hello");
}, 1000);
}).then(function(data) {
console.log('then:' + data);
// throw new Error();
return data;
}).then(function(data) {
console.log('then:' + data);
return data;
}).catch(function(data) {
console.log('catch:' + data);
}).finally(function() {
console.log('finally');
})
console.log('global end');
1.Promise内のコンテキストが呼ばれる(Promise自体は同期通信なので、通常通り上から実行されている)
1-1 setTimeout(function() { resolve("hello");}, 1000);
が実行されている。1秒後にresolve()が発動
new Promise(function(resolve, reject) {
//
})
2.グローバルにあるconsole.logがいつも通り呼ばれる
console.log('global end');
3.1-1 setTimeoutが完了したので、resolve()が実行される
console.log('global end');
4 resolve()が実行されているので
.then(function(data) {
console.log('then:' + data);
// throw new Error();
return data;
}).then(function(data) {
console.log('then:' + data);
return data;
})
以上が実行
5. finallyで終了
.finally(function() {
console.log('finally');
})