async/await与promise

async 是“异步”的简写,而 await 的意思是等待,async/await 是建立在 promise 的基础上, 像 promise 一样,也是非阻塞的。
根本作用:让异步代码看起来、表现起来更像同步代码。
asyn:
async 会将其后的函数的返回值封装成一个 Promise 对象,而 await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来。( Promise 的特点——无等待),所以在没有 await 的情况下执行 async 函数,它会立即执行,返回一个 Promise 对象,并且,绝不会阻塞后面的语句。
await:
await 等待的是一个表达式,这个表达式的计算结果是 Promise 对象或者其它值。 async 函数返回一个 Promise 对象,所以 await 可以用于等待一个 async 函数的返回值。
await 表达式的运算结果取决于它等的东西:

  1. 如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。
  2. 如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
    总结: async 会将其后的函数的返回值封装成一个 Promise 对象,而 await 会等待这个 Promise 完成,并将其 resolve 的结果返回出来。
    相比于优势:
    1.Promise传递中间值⾮常麻烦,⽽async/await⼏乎是同步的写法
    2.async/await 的优势在于处理 then 链:假设一个业务,分多个步骤完成,每个步骤都是异步的,而且依赖于上一个步骤的结果。使用promise需要在then链中传输值,使用then链。
    3.async/await 可以使用try catch来捕捉异常,便于调试。
    使用async、await就很简单。
    async与await
    promise执行顺序:
    Promise本身是同步的立即执行函数,当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行。
console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start->promise1->promise1 end->script end->promise2->settimeout

async与await执行顺序:

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start');
async1();
console.log('script end')
// 输出顺序:script start->async1 start->async2->script end->async1 end

async 函数返回一个 Promise 对象,当函数执行的时候,一旦遇到 await 就会先返回,等到触发的异步操作完成,再执行函数体内后面的语句。可以理解为,是让出了线程,跳出了 async 函数体。
promise的缺点:1因为promise是同步的立即执行函数,因此一旦新建它就会立即执行,中途取消。2.当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)

你可能感兴趣的:(前端,javascript)