December 25, 2020 [ Web ]
https://rightcode.co.jp/blog/information-technology/javascript-promise
https://rightcode.co.jp/blog/information-technology/javascript-async-await
http://www.tohoho-web.com/ex/promise.html
https://sbfl.net/blog/2016/07/13/simplifying-async-code-with-promise-and-async-await/
https://qiita.com/niusounds/items/37c1f9b021b62194e077
https://qiita.com/soarflat/items/1a9613e023200bbebcb3
非同期関数は処理の順序を制御できない問題があった、そこでPromise
↓
Promise オブジェクトは then(ok_callback, ng_callback) というメソッドを持ちます。
then() はPromise が成功または失敗になるまで処理を受け流し、
処理を.then()で繋げ順番を確保することが可能
成功時に ok_callback を、失敗時に ng_callback をコールバック関数として呼び出します
.then() は第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数
.catch(ng_callback) は、.then(undefined, ng_callback) と同じ意味
.catch() は処理中に発生した throw をキャッチできる
ES2018(ES9) では、.finally() がサポートされました
function aFunc3(data) {
return new Promise(function(okCallback, ngCallback) {
setTimeout(function() {
if (Math.random() < 0.30) {
ngCallback(new Error('ERROR!'));
} else {
okCallback(data * 2);
}
}, Math.random() * 1000);
});
}
function sample_finally2() {
aFunc3(100).then((data) => {
console.log(data);
return aFunc3(data);
})
.then((data) => {
console.log(data);
return aFunc3(data);
})
.then((data) => {
console.log(data);
throw new Error('ERROR!!!');
})
.catch((e) => {
console.log("catch");
console.log(e);
})
.finally(() => {
console.log('*** Finally ***');
});
}
//200 400 800 catch Error:ERRROR!!! *** Finally ***
Promise.all() は配列で指定された全てのPromiseタスクを待ち全てが完了した時点で .then()を呼ぶ
Promise.race()ならいずれかのPromise
function sample_all() {
p1 = taskA();
p2 = taskB();
Promise.all([p1, p2]).then(() => {
console.log("taskA and taskB are finished.");
});
}
↓
ES2017 では、async/await がサポートされました
async と await を用いることで、Promise に対応した非同期関数を、同期関数の様にシンプルに呼び出すことが可能となります
同期関数の様に呼び出したい非同期関数を呼び出す際に await をつけます。await を呼び出す関数に async をつけます
async function sample_async_await_with_catch() {
var val = 100;
try {
val = await aFunc3(val);
console.log(val);
val = await aFunc3(val);
console.log(val);
val = await aFunc3(val);
console.log(val);
} catch (e) {
console.log(e);
}
}
■コールバック関数
広い定義でいうと「高階関数に渡すための関数」
「関数を受け取る関数」は「高階関数」、つまりhello()がコールバック関数
// 関数を2回実行する関数！！
function doTwice(func) {
func(); // 1回目Hello！
func(); // 2回目Hello！
}
// あいさつするだけの関数
function hello() {
console.log('Hello!');
}
// あいさつを2回実行する
doTwice(hello);
========================================
もっと詳しく、もっと分かり易く、どう使うか↓
https://knowledge.sakura.ad.jp/24890/
https://jsprimer.net/basic/async/
https://dev.classmethod.jp/articles/javascript-asynchronous-processing/
■処理の繋がり
１）コールバック関数
ある関数の処理が終われば次のコールバック関数を呼ぶという指定がそれ
歴史的にはエラーファーストコールバック（のルール）
処理が失敗した場合は、コールバック関数の1番目の引数にエラーオブジェクトを渡して呼び出す
処理が成功した場合は、コールバック関数の1番目の引数にはnullを渡し、2番目以降の引数に成功時の結果を渡して呼び出す
fs.readFile("./example.txt", (error, data) => {
２）Promise（非同期処理に対するPromise→順番を合わせる意味では同期処理ではと思う？JSはシングルスレッドかつ非同期という糞？仕様）
ある関数の処理が終わればPromiseオブジェクトを返す
JSがシングルスレッドだが 処理を一定の単位ごとに分け処理を切り替えながら実行する並行処理（concurrent）の仕様のため 順序を考慮する必要がある
非同期処理の実行中にとても重たい処理があると非同期処理の切り替えが遅れる
Promiseオブジェクトは3つの内部状態を持ちます。
pending（保留）: まだ非同期処理は終わっていない（成功も失敗もしていない）
fulfilled（成功）: 非同期処理が正常に終了した
rejected（拒否）: 非同期処理が失敗した
初期状態はpendingで、一度fulfilledまたはrejectedになったらそれ以降は状態は変わらず、非同期処理の終了時に返す値もそれ以降は変わらない
Promiseのコンストラクターは関数を引数に取って、その関数がさらに2つの関数を引数に取る
1番目の関数（resolve）に引数を渡して実行すると状態がfulfilledになり、引数の値はPromiseオブジェクトが保持する値になる
2番目の関数（reject）に引数を渡して実行すると状態がrejectedになり、引数の値はPromiseオブジェクトが保持する値になる
関数が例外を投げた場合も状態がrejectedになり、投げた値がPromiseオブジェクトが保持する値になる、throwする値をrejectedに渡して実行した時と同じ
then()は2つの関数を引数に取り、Promiseの状態がfulfilledになったら1番目の関数が、rejectedになったら2番目の関数が実行されます。
then()の1番目の引数が関数でなければidentity function（入力値をそのまま返す関数）が代わりに使われます
2番目の引数が関数でなければthrower function（入力値を例外として投げる関数）が代わりに使われます
catch()は1番目の引数にidentity functionを指定したthen()と同じ
上の挙動をオレオレPromiseをYakusokuで作っているので分かり易い https://knowledge.sakura.ad.jp/24890/
なお、本質としてはコレ、下記ソースが決まりの流れ、ひな形としてヤリ慣れるしか
１）時間が掛かる処理をPromise化して順序立てよう
２）成功と失敗のコールバックを指定しよう
//処理にコールバック関数を入れて成功と失敗時の型で終える
function dummyFetch(cmt, callBack) {
setTimeout(() => {
if (cmt.startsWith("/success")) {
callBack(null, { body: `Response body of ${cmt}` });
} else {
callBack(new Error("Bad"));
}
}, 1000 * Math.random());
}
//プロミスを入れるためラッパーを関数にかます
function aaaFilePromise(cmt) {
return new Promise((resolve, reject) => {
dummyFetch(cmt, (err, data) => {
if (err) {
reject(err); // 失敗: 内部状態をrejectedにする
}
else {
resolve(data); // 成功: 内部状態をfulfilledにする
}
});
});
}
//プロミスチェーンでのフロー
aaaFilePromise("/success/passwd")
.then((data) => { // 読み出しに成功したらresolve()に渡した値が引数として渡される
console.log("1", data);
//return 'next';//テキストがあってもなくても次のthenに行く、省略でもテキストでも第一引数関数に行く成功側
return aaaFilePromise("/etc/text");//エラーで次のthenの失敗側の第二引数関数にきっちり行く
})
.then((data) => {
console.log("2", data);
return aaaFilePromise("/success/shadow1");
}, (data) => {
console.log("2e", data);
return aaaFilePromise("/success/shadow2");
})
.then((data) => {
console.log("3", data);
return aaaFilePromise("/etc/shadow");
})
.catch((err) => { // reject()に渡した値が引数として渡される
console.log("error", err);
});
then()/ catch()は、引数で渡された関数の戻り値から新たにPromiseオブェクトを作り、そのオブジェクトを返します。そのためメソッドチェーンが可能
引数に渡した関数の戻り値がPromiseオブジェクトの場合はそのオブジェクトをそのまま返す、そうでなければ戻り値をPromiseで包んで返す
エラーでキャッチに飛ぶ訳ではなく次のthen第2引数関数に飛んでいる、省略でcatchに行っているように見えるだけ
dexieやPWAでの提供があり使う（処理を順序立てて使うようプログラムを組む時に
dexie: db.schedule.where('site').equals('sche').first().then(function(records) {
pwa: caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
３）async / await
promiseは順番決めができたがasync/awaitは順番を扱う処理もできるsetTimeout/setIntevalがプロミスチェーンだけでは時間を止められない
シングルスレッドから似非スレッドで分離し非同期になるから、awaitを入れると同期する↓
const wait = (sec) => {
return new Promise((resolve, reject) => { setTimeout(resolve, sec*1000); });
};
async function arrKick_async(arr) {
for(let i=1; i<=num_arr; i++){
arr = await kickPromise(arr);
await wait(2);
}
}
arrKick_async(arr);
========================================
JSネイティブとPromiseとasyncが混ざった場合は同期しない、then()すら超えてくる↓
４）コールバック地獄
結局コールバック地獄が扱いやすい（スレッドの切り替えがなければ同期ができる）、最近のJSフレームワークは全部Promise化しているらしいが
例）キャッシュを保存し、そのステータスを取るようにAsyncやPromiseで保存待ちの順番をにしても、待たない
//隙間がないと1度エラーだとエラーになりっぱなし
let num_cache;
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
num_cache = getCacheStatus();
if(num_cache == 0 || !num_cache){
//setTimeoutで隙間があっても関数スレッドの返り値を代入するスレッド切替時に、返り値を待つスレッドの方は次の処理に進んでしまいIF判定ができない
let s = setTimeout(function(){
let num_cache1 = getCacheStatus();
if(num_cache1 == 0 || !num_cache1){
s = setTimeout(function(){
let num_cache2 = getCacheStatus();
if(num_cache2 == 0 || !num_cache2){
s = setTimeout(function(){
let num_cache3 = getCacheStatus();
if(num_cache3 == 0 || !num_cache3){
s = setTimeout(function(){
let num_cache4 = getCacheStatus();
if(num_cache4 == 0 || !num_cache4){
//Func返り値やPromiseやAsyncでのスレッドの切り替えがないDOMの判定であれば上手くいく
let s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == 'none'){
s = setTimeout(function(){
getCacheStatus();
if(document.getElementById('mes_filenames').innerHTML == '<?php echo $lang_page->install_none; ?>'){
function getCacheStatus(){
let num_caches = 0;
let num_success = 0;
caches.keys().then(function(keyList){
return Promise.all(keyList.map(function(key){
caches.open(key).then(function(cache) {
cache.matchAll().then(function(response) {
document.getElementById('mes_filenames').innerHTML = '';
let s;
let o;
for(const value of response){
s = value.status;
o = value.ok;
document.getElementById('mes_filenames').insertAdjacentHTML('afterbegin', value.url + '<br>');
if(s == '200' && o){
num_success++;
}
num_caches++;
}
if(num_caches > 0){
document.getElementById('mes_progress_rate').innerHTML = 'Progress: ' + num_success / num_caches * 100 + '%';
}else{
document.getElementById('mes_filenames').innerHTML = 'None';
}
});
});
}));
});
return num_caches;
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
thenの入れ子だと親の部分だけ先に進んでしまう、入れ子ダメで親子を作れば親→子の一方方向で子で終わるトーナメント構造で(上がらない)
test1().then((result) => {
test2().then((result) => { //fuok });
})then(function() これは入れ子
↓
test1().then((result) => {
test2().then((result) => {
//fuok
})then(function(){ //fuok2 }); これでトーナメント構造
})catch(function(e)
promiseチェーンでthen毎にに欲しい引数を出すが、複数であればそれらの引数をthenに渡せない、下記1は駄目
１）thenで一つの引数になるようにロジックを組む（thenのトーナメント構造、一階層上で変数に入れる等）
}).then(function(response){
return [response.json(), arr_del];
}).then(function(v) {
json = v[0]; arr = v[1];
２）callbackとresolveに配列を使うとOK、オブジェクトでもいいかも
function dummyFetch(cmt, callBack) {
if(Array.isArray(cmt){
var p = cmt[0];
var s = cmt[1];
}else{
var p = cmt;
var s = 1;
}
setTimeout(() => {
if (p.startsWith("/success")) {
var r = [p, ++s];//これ不可[p, s++]
callBack(null, r);
} else {
callBack(new Error("Bad"));
}
}, 1000 * Math.random());
}
function aaaFilePromise(cmt) {
return new Promise((resolve, reject) => {
dummyFetch(cmt, (err, data) => {
if (err) {
reject(err);
}
else {
if(Array.isArray(data){
var p = data[0];
var s = data[1];
}else{
var p = data;
var s = 1;
}
resolve([p, s]); // 成功: 内部状態をfulfilledにする
}
});
});
}
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
Promise化していない関数を使いたいが、そのまま使うかthen化できるようにするか？
１）次thenに進みたい元Funcの処理としてresolveの返り値に入れる、ダメなら省略可だがreject()に渡しcatchする
２）次thenには適当でもいいのでreturnで進む
function test1 () {
return new Promise((resolve, reject) => {
const a = 1;
const b = 2;
resolve([a, b]);
})
}
test1().then((result) => {
console.log(result[0]); // 1
console.log(result[1]); // 2
return 'go next';
}).then(function(){
エラーハンドリングしたい、よくわからんが下記で動作に違いがでた、rejectはJSがエラーを吐いた
１）catchさせるにはthrow new Errorし、alertを出す
２）catchはしないが次のthenには移動させないためreturn false
}).then(function(json){
if(json.init == 'Not appropriate access'){
throw new Error('Server warning');
}else if(json.init == 'No data'){
//reject("initiate!");
return false;
}else{
resolve(json);
}
}).catch(function(error){
alert('Ooops: ' + error);
});
Promise.allを使って、3つのpromiseを同時に実行、allはすべての非同期処理がresolveされたタイミングで結果を返
Promise.all([test1, test2, test3]).then(function() {
console.log("Fourth");
もっと簡単に async, await, Promise - Qiita■Javascript
https://www.bangboo.com/cms/blog/page_325.html
Posted by funa : 01:06 AM
