初识async/await
刚开始工作的时候我对async的理解就是把一个函数变成异步函数,await就是等待嘛,顾名思义就是等你修饰的那个语句执行完了才执行下一个语句,但是我的理解好像有很大的欠缺。
async/await是什么?
我们都知道js是单线程的,所以异步编程在我们js中是尤为重要的,虽然给我们带来了很大的便利,但是异步函数也存在很多不合理,难搞的问题,所以async/await这个概念就有了,它就是ES7提出来的基于Promise的解决异步的方案。这样说可能有些抽象,那接下来我们就详细摸索一下这两个东西到底是怎么回事!
async
async用来修饰一个函数把它变成异步函数,然后返回一个Promise对象。 如果async函数中是return一个值,这个值就是Promise对象中resolve的值;如果async函数中是throw一个值,这个值就是Promise对象中reject的值。 举个例子:
async function async(num) {
if (num > 0) {
return num // 这里相当于resolve(num)
} else {
throw num // 这里相当于reject(num)
}
}
async(1).then(function (v) {
console.log(v); // 1
});
async(0).catch(function (v) {
console.log(v); // 0
})
await
await会暂停当前async函数的执行,等待后面的Promise的计算结果返回以后再继续执行当前的async函数。注意这里await的等待是有条件的,不是任何时候都会等待,这个条件就是必须要返回Promisee,如果不是的话,他就不会等你执行,依然会继续往下执行。
async/await的作用
举一个最常见的例子,axios就是一个异步操作并且返回一个Promise对象,我相信大家在使用axios的时候最初也会有这样的写法(test1和test2是我已经封装过后的api)
test1(params).then(res1=>{
test2(params).then(res2=>{
....
})
})
这就模仿出我需要在一个请求里面再继续发请求,就不断的需要在回调里面发请求,然后这样就会显而易见产生一个问题,代码阅读性降低,你一层一层去找是非常烦的,眼花缭乱的(本人亲自体验过),然后就产生所谓的“回调地狱”这个问题。 但是我们现在有了async/await,就能很好的解决这个问题,不需要一层一层的再去套请求,改进后的结果:
const func= async ()=>{
const res1=await test1(params);
const res2=await test2(params);
....
}
这样写不仅美观了很多,还解决了在回调里面再嵌套请求的问题,这样子写在函数func里面你就把它看成一个同步操作依次从上往下执行就好了,理解起来也不费劲了。
小结
以上就是我对async/await的一些理解和看法,希望我的分享能帮助大家理解,如果哪里说的不清楚或者有问题,欢迎评论及时指出!谢谢大家!