TIL019 JavaScript: async & await
14146 ワード
Async & Await
1. Async
function fetchUser() {
return new Promise((resolve, reject) => {
//do network request in 10 sec....
resolve('somi');
})
}
const user = fetchUser();
console.log(user);
promiseを用いると,上記の内容をasyncとして表すことができ,より簡潔に表すことができる.async function fetchUser() {
//do network request in 10 sec....
return 'somi';
}
const user = fetchUser();
user.then(console.log);
console.log(user); //Promise {<fulfilled>: "somi"}
2. Await
function delay(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
await delay(2000);
// throw 'error'
return 'apple';
}
async function getBanana() {
await delay(1000);
return 'banana';
}
下図のように合計2秒かかります.function pickFruit() {
return getApple().then(apple => {
return getBanana().then(banana => `${apple}+${banana}`);
});
}
async function pickFruit(){
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`
}
promiseを作成して実行すると、並列に実行され、結果値が1秒以内に表示されます.
ただし、このように並列に実行すると、上記のようにコードは記述されません.(第3部参照)async function pickFruit(){
const promiseApple = getApple();
const promiseBanana = getBanana();
const apple = await promiseApple;
const banana = await promiseBanana;
return `${apple} + ${banana}`
}
pickFruit().then(console.log); //apple + banana
3. useful promise APIs
function pickAllFruits(){
return Promise.all([getApple(), getBanana()])
.then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log); //apple + banana
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log) //banana(먼저 실행되는 값만 출력됨)
Reference
この問題について(TIL019 JavaScript: async & await), 我々は、より多くの情報をここで見つけました
https://velog.io/@somangoi/TIL019-JavaScript-async-await
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
function fetchUser() {
return new Promise((resolve, reject) => {
//do network request in 10 sec....
resolve('somi');
})
}
const user = fetchUser();
console.log(user);
async function fetchUser() {
//do network request in 10 sec....
return 'somi';
}
const user = fetchUser();
user.then(console.log);
console.log(user); //Promise {<fulfilled>: "somi"}
function delay(ms){
return new Promise(resolve => setTimeout(resolve, ms));
}
async function getApple(){
await delay(2000);
// throw 'error'
return 'apple';
}
async function getBanana() {
await delay(1000);
return 'banana';
}
function pickFruit() {
return getApple().then(apple => {
return getBanana().then(banana => `${apple}+${banana}`);
});
}
async function pickFruit(){
const apple = await getApple();
const banana = await getBanana();
return `${apple} + ${banana}`
}
async function pickFruit(){
const promiseApple = getApple();
const promiseBanana = getBanana();
const apple = await promiseApple;
const banana = await promiseBanana;
return `${apple} + ${banana}`
}
pickFruit().then(console.log); //apple + banana
function pickAllFruits(){
return Promise.all([getApple(), getBanana()])
.then(fruits => fruits.join(' + '));
}
pickAllFruits().then(console.log); //apple + banana
function pickOnlyOne() {
return Promise.race([getApple(), getBanana()]);
}
pickOnlyOne().then(console.log) //banana(먼저 실행되는 값만 출력됨)
Reference
この問題について(TIL019 JavaScript: async & await), 我々は、より多くの情報をここで見つけました https://velog.io/@somangoi/TIL019-JavaScript-async-awaitテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol