JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)
2022.04.29
おはよう御座います。
この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。
"use strict";
const main = (a,b,c)=>{
return new Promise ((resolve)=>{
console.log(a,b,c);
b++;
resolve({a:a,b:b,c:c});
});
}
(async()=>{
await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
// main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
console.log("fin");
})();Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。
サンプルコードはこちらから閲覧ください（検証）ませ！！
タグ
１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,
JavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)
2021.11.17
謎の訪問者さんが検索窓を使用して何度かググっているので要望にお応えJavaScript(js)でcsvファイルを読み込み自動計算する(合計sum)というものを作りました。以前、csvを元にテーブルを作成するものを作っていました、ソースコードはそれを応用して作っています。実際、数万行に渡るファイルを自動計算するには、かなり爆速のパソコンが必要になります。このプログラムで耐えれるのは精々、1,000行あたりだと思います。
過去のコードと今回のサンプルデモのリンクを貼っときます。
どうぞご自由にお使いください。
https://zip358.com/tool/demo47/
"use strict";
var csv = {
load:async function(filename,id){
const responseFile = await fetch(filename);
const result = await responseFile.text()
let separate1 = /\r\n/;
let separate2 = ",";
let data = (result.split(separate1)).map(function(value){
return (value.split(separate2)).map(function(value1){
return value1;
});
});
let sum =[];
for (const usedata of data) {
(usedata).map(function(val,index,array){
sum[index] = (isNaN(parseInt(sum[index]))?0:parseInt(sum[index])) + parseInt(array[index]);
});
}
console.log(sum);
document.getElementById(id).innerHTML = sum.join(",");
return "OK";
}
};
csv.load("math.csv?", "sum");タグ
000, １, async, await, const, CSV, fetch, filename, function, ID, javascript, JS, load, quot, res, responseFile, strict, sum, use, var, お応え, かなり, コード, ご自由, サンプル, ソース, それ, テーブル, デモ, パソコン, ファイル, プログラム, もの, リンク, 今回, 以前, 何度か, 作成, 使用, 元, 合計, 実際, 必要, 応用, 数万, 検索窓, 爆速, 精々, 自動, 要望, 計算, 訪問者, 謎, 過去,
asyncとawaitとthenの関係と使い道。
2021.01.27
asyncとawaitとthenの関係と使い道は？まず、関係性はこの3つでまぁ一つの役割を果たすと考えても良いかもしれません。どんな時に使うかは、例えば、innerHTMLに計算した値を渡したいとか…。いや違うな。同期処理として使うのが正解ですね。尚、asyncは非同期でawaitで非同期通信を同期処理とする。
ちなみにIE11では動かない処理なので氣をつけてご使用ください。今どき、IE11なんてと思うかもしれないけど、使っている人がいるから・・・。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}
IE11を使っているパターン、例えば社長や上司がシニア世代だったりするとIE11をいまだに使っていたりする。そもそもWindows10にIE11がインストールされている時点で悪だ・・・と思う開発者もいるはずです。そろそろマイクロソフト、IE11なんてものを強制的に削除するようなバージョンアップをして戴きたいと思ってます。それぐらい問題だと。あと、IE11で引っかかったことがあります。新しいブラウザでは下記のコードをHTMLに記入すると察してくれてjsファイルを読み込んでくれるが、IE11は違うのだ。
<script src="./assets/js/common.js"></script>これじゃ読み込んでくれない。厳密に書かないとファイルを読み込んでくださらない。やっぱ早くIE11の撲滅を願う。
<script type="text/javascript" src="./assets/js/common.js"></script>タグ
'src', addEventListener, assets, async, await, await test, common.js", document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;btn", quot;text, resolve, setTimeout, then, 撲滅, 氣,
demo23、javascriptの非同期同期処理?
2020.11.18
今日はJavaScriptで非同期、同期処理のことに付いて考えてみた。関数を呼び出して返却の値を変数に渡す処理を作って頂けると非同期処理と同期処理の違いがわかるかと思います。例えばこういうJSの処理があるとします。
document.getElementById("btn").addEventListener("click", async (e) => {
test1();
test2();
test3();
await test1();
await test2();
await test3();
});
function test1() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 1");
resolve('1');
}, 3000);
});
}
function test2() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 2");
resolve('2');
}, 2000);
});
}
async function test3() {
return new Promise(resolve => {
setTimeout(() => {
console.log("btn = 3");
resolve('3');
}, 100);
});
}こちらの処理を試すと結果、このような内容がデバックモードで表示されます。予想通りの結果が返ってきましたか？それとも予想外の結果が返ってきましたか？
asyncが付いていてawaitがついてない場合とついている場合とでは違いの差がわかるかと思います。いろいろと試してみると非同期処理の応用が出来るかと思います、逆に言えば上手く非同期処理を使いこなすことが出来るとコードが短縮出来たり、効率的に回せるのではないかと思います。自分もこれらを使っていろいろと作ってみたいですね(´Д｀)。因みに今回、Promiseを簡略化したパターンでコードを書いています。
尚、Demo23にはデモコードが存在しますので動作を検証してみてください。
https://zip358.com/tool/demo23/
タグ
addEventListener, async, async function test, await, await test, console.log, document.getElementById, function test, JS, Promise, quot, quot;btn, quot;btn", quot;click", resolve, setTimeout, デバックモード, 変数, 返却, 関数,
JavaScriptのPromise例えが分からない人のために。
2020.06.06
自分は『Promiseってなんやねん、わからんわ。』という人でした。皆さん賢いので複雑怪奇なコードで教えてくれていて…わかんない。
Promiseって非同期処理にするための道具です。Promiseって書いてその中に非同期処理の内容を書いてあげる。値を戻したい場合は命名した名前のカッコの中に値を返してあげれば良いが！！、どうも渡せる値は一つだけなのだ。
ちなみにthen（その後）で、非同期処理が終わった後にする処理が書けるですね(´・ω・`)。thenの中に非同期処理の値も返ってくる‥但しひとまとめで、、そんだけの話。またエラーになった時の処理も対応できるってさ…、そしてチェーン（数珠繋ぎ）の様に書くことも可能です、ここではそれらは割愛しますね?。
ちなみに最初、asyncとawaitと混合していて悩んでおりました。asyncとawaitは対になっていると同じような感覚でPromiseとthenは対になっていると考えてください。あまり複雑怪奇に考えずサンプルコードを動かして出来るできないを判断した後に賢い人が書いたリファレンスなどを読むことをオススメします。
最後に単純なソースコードとコンソールの結果を載せときますね。
"use strict";
var a = 0;
const q1 = new Promise((zaru)=>{//zaru...名前付けは何でも良い（予約されているものでなければ
a++;
zaru(a + "1..");//データをまとめて返す
});
const q2 = new Promise((zaru)=>{
a++;
zaru(a + "2..");
});
const q3 = new Promise((zaru)=>{
zaru("3~~~~n");
});
const qdaaaaaaaa = new Promise((zaru)=>{
zaru([1,2,3,"Dahahaha!!"]);
});
Promise.all([q1,q2,q3,qdaaaaaaaa]).then((val)=>{
console.log(val);
}
);
qdaaaaaaaa.then((val)=>{
console.log(val);
});
Array(4) [1, 2, 3, "Dahahaha!!"]
move.js:26
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"
Array(4) ["11..", "22..", "3~~~~n", Array(4)]
move.js:21
length:4
__proto__:Array(0) [, …]
0:"11.."
1:"22.."
2:"3~~~~n"
3:Array(4) [1, 2, 3, …]
length:4
__proto__:Array(0) [, …]
0:1
1:2
2:3
3:"Dahahaha!!"タグ
async, await, javascript, Promise, then, エラー, かっこ, コード, ここ, こと, それら, そん, ため, チェーン, なん, ひとまとめ, 一つ, 中, 人, 但し, 値, 内容, 処理, 割愛, 可能, 同期, 名前, 命名, 場合, 対, 対応, 後, 感覚, 数珠繋ぎ, 時, 最初, 混合, 皆さん, 自分, 話, 道具,