[JS]Promise関数
Promise関数とは?
プロセスはJavaScriptの非同期処理に使用されるオブジェクトです.(承知~こんな感じ…)
JAvascriptの非同期処理は、「特定のコードの実行完了を待たずに、まず以下のコードのjavascriptの特性を実行する」ことを意味する.
△私はあなたを待たないで、いつ来ても、次のコードを実行します.
なぜPromiseが必要なのですか?
プロセスは、主にサーバから受信したデータを画面に表示するために使用されます.
通常、Webアプリケーションを実装する場合、サーバはAPIを使用してデータを要求および受信する.
APIが実行されると、サーバに「1つのデータを送信する」という要求が発行されます.ただし、データを受信する前に画面にデータを表示しようとすると、エラーや空白が発生します.
(コンピュータのロードとロードの時間が必要なので!!)
これらの問題を解決する方法の一つは「Premis」です.
->データのインポートに時間がかかるため、他の操作を要求して実行します(ロード中和面を解放します)?!と理解する.
Promiseの処理手順
ソース:https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
この文章は理解に役立ちます!コメントをよく読むfunction task1(a, b, cb) {
setTimeout(() => {
const res = a + b;
cb(res);
}, 3000);
}
function task2(a, cb) {
setTimeout(() => {
const res = a * 2;
cb(res);
}, 1000);
}
function task3(a, cb) {
setTimeout(() => {
const res = a * -1;
cb(res);
}, 2000);
}
task1(3, 4, (a_res) => {
console.log("task1:", a_res);
task2(a_res, (b_res) => {
console.log("task2:", b_res);
task3(b_res, (c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
しかしpromiseでコードを表現することができますfunction task1(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 3000);
});
}
function task2(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function task3(a, cb) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 2000);
});
}
task1(3, 4).then((a_res) => {
console.log("task1ß:", a_res);
task2(a_res).then((b_res) => {
console.log("task2:", b_res);
task3(b_res).then((c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
このように表現することができますが、newpromise構造は理解していないので、それはこのようにします.return new Promise((resolve,reject)=>{});
=
const executor1 = (resolve,reject) => {}
return new Promise (executor1)
一番下のコード構造はコールバック関数と一致し,以下のように記述できる.task1(3, 4)
.then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
})
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
これを切寧と言います.
promisを使用すると、コードを下に拡張できます.
Premisを使用する利点は、途中で他の作業を挿入できることです(=再利用可能)
以下同const bPromiseResult = task1(3, 4).then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
});
let a = "프로미스랑 많이 친해져야겠다";
console.log(a);
bPromiseResult
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//프로미스랑 많이 친해져야겠다
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
すなわち、promiseオブジェクトを使用して、非同期処理を呼び出すコード=task 1(3,4)と処理結果のコード=bPromiseResultを分離することで、コールバック関数構造(>フォーマット)を回避し、より読みやすく、より簡潔な非同期処理を行うことができます.
fromis...勉強を続けます!
今一番難しいのは、画像ファイルに表示されない文章です!こわす
Reference
この問題について([JS]Promise関数), 我々は、より多くの情報をここで見つけました
https://velog.io/@fltxld3/JS-Promise함수
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
プロセスは、主にサーバから受信したデータを画面に表示するために使用されます.
通常、Webアプリケーションを実装する場合、サーバはAPIを使用してデータを要求および受信する.
APIが実行されると、サーバに「1つのデータを送信する」という要求が発行されます.ただし、データを受信する前に画面にデータを表示しようとすると、エラーや空白が発生します.
(コンピュータのロードとロードの時間が必要なので!!)
これらの問題を解決する方法の一つは「Premis」です.
->データのインポートに時間がかかるため、他の操作を要求して実行します(ロード中和面を解放します)?!と理解する.
Promiseの処理手順
ソース:https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
この文章は理解に役立ちます!コメントをよく読むfunction task1(a, b, cb) {
setTimeout(() => {
const res = a + b;
cb(res);
}, 3000);
}
function task2(a, cb) {
setTimeout(() => {
const res = a * 2;
cb(res);
}, 1000);
}
function task3(a, cb) {
setTimeout(() => {
const res = a * -1;
cb(res);
}, 2000);
}
task1(3, 4, (a_res) => {
console.log("task1:", a_res);
task2(a_res, (b_res) => {
console.log("task2:", b_res);
task3(b_res, (c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
しかしpromiseでコードを表現することができますfunction task1(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 3000);
});
}
function task2(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function task3(a, cb) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 2000);
});
}
task1(3, 4).then((a_res) => {
console.log("task1ß:", a_res);
task2(a_res).then((b_res) => {
console.log("task2:", b_res);
task3(b_res).then((c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
このように表現することができますが、newpromise構造は理解していないので、それはこのようにします.return new Promise((resolve,reject)=>{});
=
const executor1 = (resolve,reject) => {}
return new Promise (executor1)
一番下のコード構造はコールバック関数と一致し,以下のように記述できる.task1(3, 4)
.then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
})
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
これを切寧と言います.
promisを使用すると、コードを下に拡張できます.
Premisを使用する利点は、途中で他の作業を挿入できることです(=再利用可能)
以下同const bPromiseResult = task1(3, 4).then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
});
let a = "프로미스랑 많이 친해져야겠다";
console.log(a);
bPromiseResult
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//프로미스랑 많이 친해져야겠다
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
すなわち、promiseオブジェクトを使用して、非同期処理を呼び出すコード=task 1(3,4)と処理結果のコード=bPromiseResultを分離することで、コールバック関数構造(>フォーマット)を回避し、より読みやすく、より簡潔な非同期処理を行うことができます.
fromis...勉強を続けます!
今一番難しいのは、画像ファイルに表示されない文章です!こわす
Reference
この問題について([JS]Promise関数), 我々は、より多くの情報をここで見つけました
https://velog.io/@fltxld3/JS-Promise함수
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
function task1(a, b, cb) {
setTimeout(() => {
const res = a + b;
cb(res);
}, 3000);
}
function task2(a, cb) {
setTimeout(() => {
const res = a * 2;
cb(res);
}, 1000);
}
function task3(a, cb) {
setTimeout(() => {
const res = a * -1;
cb(res);
}, 2000);
}
task1(3, 4, (a_res) => {
console.log("task1:", a_res);
task2(a_res, (b_res) => {
console.log("task2:", b_res);
task3(b_res, (c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
function task1(a, b) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a + b;
resolve(res);
}, 3000);
});
}
function task2(a) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 1000);
});
}
function task3(a, cb) {
return new Promise((resolve, reject) => {
setTimeout(() => {
const res = a * -1;
resolve(res);
}, 2000);
});
}
task1(3, 4).then((a_res) => {
console.log("task1ß:", a_res);
task2(a_res).then((b_res) => {
console.log("task2:", b_res);
task3(b_res).then((c_res) => {
console.log("task3:", c_res);
});
});
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
return new Promise((resolve,reject)=>{});
=
const executor1 = (resolve,reject) => {}
return new Promise (executor1)
task1(3, 4)
.then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
})
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
const bPromiseResult = task1(3, 4).then((a_res) => {
console.log("task1:", a_res);
return task2(a_res);
});
let a = "프로미스랑 많이 친해져야겠다";
console.log(a);
bPromiseResult
.then((b_res) => {
console.log("task2:", b_res);
return task3(b_res);
})
.then((c_res) => {
console.log("task3:", c_res);
});
//<결과>
//프로미스랑 많이 친해져야겠다
//3초후.. task1: 7
//1초후.. task2: 14
//2초후.. task3: -14
Reference
この問題について([JS]Promise関数), 我々は、より多くの情報をここで見つけました https://velog.io/@fltxld3/JS-Promise함수テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol