Async/await 和 Promises 区别
Async/await 是建立在 Promises上的，不能被使用在普通回调以及节点回调。
Async/await 和 Promises 很像，不阻塞。
Async/await 代码看起来像同步代码。
语法
假设函数getJSON返回值是 Promise，并且 Promise resolves 有一些JSON 对象。我们只想调用它并且记录该JSON并且返回完成。
使用Promise
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()使用Async
const makeRequest = async() => {
console.log(await getJSON)
return "done"
}
makeRequest()区别
在函数前有一个关键字async，await关键字只能在使用async定义的函数中使用。任何一个async函数都会隐式返回一个promise，并且promise resolve 的值就是 return 返回的值 (例子中是”done”)
不能在函数开头使用await
有哪些好处
简洁的代码
使用async函数可以让代码简洁很多，不需要像Promise一样需要些then
错误处理
Promise 中不能自定义使用 try/catch 进行错误捕获，但是在 Async/await 中可以像处理同步代码处理错误
const makeRequest = () => {
try {
getJSON()
.then(result => {
// this parse may fail
const data = JSON.parse(result)
console.log(data)
})
// uncomment this block to handle asynchronous errors
// .catch((err) => {
// console.log(err)
// })
} catch (err) {
console.log(err)
}
}Async/await
const makeRequest = async () => {
try {
// this parse may fail
const data = JSON.parse(await getJSON())
console.log(data)
} catch (err) {
console.log(err)
}
}条件语句
条件语句也和错误捕获是一样的，在 Async 中也可以像平时一般使用条件语句
Promise
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}Async
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}中间值
在一些场景中，也许需要 promise1 去触发 promise2 再去触发 promise3，这个时候代码应该是这样的
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}如过 promise3 不需要 value1，嵌套将会变得简单。如果你有强迫症，则将值1&2使用 promise.all() 分装起来。
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return Promise.all([value1, promise2(value1)])
})
.then(([value1, value2]) => {
// do something
return promise3(value1, value2)
})
}但是使用 Async 就会变得很简单
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}错误栈
如过 Promise 连续调用，对于错误的处理是很麻烦的。你无法知道错误出在哪里。
const makeRequest = () => {
return callAPromise()
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error("oops");
})
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})但是对于 Async 就不一样了
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
throw new Error("oops");
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at makeRequest (index.js:7:9)
})原文地址=> 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！