0
点赞
收藏
分享

微信扫一扫

初识 Promise与async/await

非凡兔 2022-02-23 阅读 69

什么是async/await

async/await是异步代码的新方式,以前的方法有回调函数和Promise。 async/await是基于Promise实现的,它不能用于普通的回填函数。 async/await与Promise一样,是非阻塞的。 async/await使得异步代码看起来像同步代码,这正是它的魔力所在之处。

什么是Promise

  • Promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外)
  • 并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据
  • 代码风格,容易理解,便于维护
  • 多个异步等待合并便于解决
  • Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。

async/await语法

  • 使用Promise
Promise.resolve().then(data=>{//promise
    console.log(data)
    return "aaa"
 })
  • 使用Async
async function foo() {
	console.log(await getJSON)
    return "aaa"
}
foo();

区别

  1. 函数前面多了一个async关键字。await关键字只能用于async定于的函数内。async函数会隐式地返回一个Promise,该promise的resolve值就是return的值。示例中resolve的值就是字符串"aaa"
  2. await的必须在异步函数中使用;其中await有限制(不允许出现在箭头函数中;不允许出现在同步函数声明中;不允许出现在同步函数表达式中;如果在同步函数中使用await就会抛出SyntaxError。)
//不允许出现在箭头函数中
function foo(){
	const syncFn = () => {
    return await Promise.resolve('foo');
    };
    console.log(syncFn());
}
//不允许出现在同步函数声明中
function bar(){
	const syncFn=function ()  {
    return await Promise.resolve('bar');
    };
    console.log(syncFn());
}
//不允许出现在同步函数表达式中
function baz(){
	const syncFn=function ()  {
    return await Promise.resolve('baz');
    };
    console.log(syncFn());
}

为什么async/await更好?

  1. 使用async函数可以让代码简洁很多,不需要像Promise一样需要then,不需要写匿名函数处理Promiseresolve的值,也不需要定义多余的data变量,还避免了嵌套代码。
  2. async/await 配合 try/catch可以同时处理同步和异步的错误。在下面的示例中,try/catch不能处理JSON.parse的错误,因为它在Promise中,我们需要使用.catch,这样的错误会显得代码非常的冗余。
const makeRequest = () => {
  try {
  	getJSON().then(result => {
    // JSON.parse可能会出错
    const data = JSON.parse(result)
    console.log(data)
     })
   // 取消注释,处理异步代码的错误
   // .catch((err) => {
   //   console.log(err)
   // })
   } catch (err) {
    console.log(err)
        }
    }

使用async/await的话,catch能处理JSON.parse错误

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}
举报

相关推荐

0 条评论