JavaScript 的网络请求异步的, 即网络请求不会阻塞当前 JS 代码的继续执行, 而是通过回调的方式, 网络请求的代码块中注入回调函数, 当网络请求完成, 会触发相应的事件, 通过触发事件来执行注册的回调函数. 回调的执行时间是不确定的, 因此会影响程序的执行逻辑, 另一方面, 如果回调依赖过多, 或导致很深的回调嵌套, 使代码的可读性和可维护性降低.
async await 是 es7 中的新语法, 基于 promise, 使异步调用扁平化.
async 用于申明一个 function 是异步的, 而 await 用于等待一个异步方法异步执行完成.
- async function asyncFunctionName(){
- const response =await fetch(url,options);
- const result =await response.text();
- return JSON.parse( result );
- }
asyncFunction 返回的返回值会通过 Promise.resolve() 封装成 Promise 对象, 通过 Promise.then() 来获取 return 的返回值.
await 等待的是一个实际返回值, 同时 await 不仅仅用于等待 Promise 对象, 它可以用于等待任何表达式的返回, 因此 await 后面实际是可以接普通函数的调用或者直接量的. 如果 await 等到的不是一个 promise 对象, 那 await 表达式后面的运算结果就是它等到的值; 如果 await 等到的是一个 promise 对象, await 就会阻塞当前 JS 的继续执行, 等着 promise 对象 reslove, 得到 resolve 的值, 作为 await 表达式的运算结果.
因为 await 会阻塞代码的运行, 所以 await 必须放在 async 函数体中, 而 async 函数的调用不会造成阻塞, 它内部所有的阻塞都被封装在一个 promise 对象中异步执行.
async await 的优势对比 promise 在于处理 then 链. 在 async 函数体中, 可以把对异步返回值得处理程序放在 await 后面, 程序会依次执行, 可以像写同步代码一样写异步回调.
注意点: await 等待的 promise 对象, 运行时可能会 reject , 所以最好将 await 放在 try{ } catch 代码块中.
- async ()=>{
- try{
- const response = await felch(url,options);
- }catch(err=>{
- console.log(err)
- })
- }
- // 对比 promise 链式调用
- promise.then().catch()
来源: https://www.cnblogs.com/wust-hy/p/10500826.html