async&await
async:
- async叫异步函数。是ES2017新出的,这让异步操作变得更简单了。本质上是Generator的语法糖,所以本质上还是操作promise对象观察状态。
-
可以作用在任何方法前, 返回值是一个Promise对象(回调函数也可以使用async)
-
函数内部return的返回值, 会成为then回调函数的参数
-
async作用的方法,如果内部出现报错,可以被promise的catch方法捕获
-
常规使用,一般都会通过try catch进行有可能报错的代码处理
await:
-
await只能作用在async修饰的方法中,不能单独使用,如果使用报错:await is only valid in async functions and the top level bodies of modules
-
await是会阻塞代码执行
-
正常情况 await后面跟着一个Promise对象; 返回的是Promise对象的成功后结果; 如果是一个普通值,那么会直接返回这个值reject的返回 await没有办法进行捕获(使用try catch进行捕获
async&await是Promise和Generator的语法糖
回调地狱:
async await 回调地狱
1. 回调地狱 简单说,就是函数作为参数层层嵌套
在使用JavaScript时,为了实现某些逻辑经常会写出层层嵌套的回调函数,
如果嵌套过多,会极大影响代码可读性和逻辑,这种情况也被成为回调地狱
回调地狱:一个异步请求套着一个异步请求,一个异步请求依赖于另一个的执行结果,使用回调的方式相互嵌套。它会造成我们的代码可读性非常差,后期不好维护。
解决方法:
1 拆解 function 将各步拆解为单个的 function
function buildCatList(list, returnVal, fn) {
setTimeout(function (name) {
var catList = list === '' ? name : list + ',' + name
fn(catList)
}, 200, returnVal)
}
buildCatList('', 'Panther', getJanguar)
function getJanguar(list) {
buildCatList(list, 'Janguar', getLynx)
}
function getLynx(list) {
buildCatList(list, 'Lion', print)
}
function print(list) {
console.log(list)
}
2 通过 Promise 链式调用的方式
function buildCatList(list, returnVal) {
return new Promise(function (resolve, reject) {
setTimeout(function (name) {
var catList = list === '' ? name : list + ',' + name
resolve(catList)
}, 200, returnVal)
})
}
3 async / await
function buildCatList(list, returnVal) {
return new Promise(function (resolve, reject) {
setTimeout(function (name) {
var catList = list === '' ? name : list + ',' + name
resolve(catList)
}, 200, returnVal)
})
}
function fn(list) {
return list + ',' + 555
}
async function render() {
var a = await buildCatList('','Panther')
var b = await buildCatList(a, 'Jaguar')
var c = await buildCatList(b, 'Lion')
var d = await fn(c)
console.log(d) // Panther,Jaguar,Lion,555
}
render()
function hell(arg) {
return new Promise((resolve, reject) => {
setTimeout(()=>{
var val
if(!arg) val = '1'
else val = arg
resolve(arg + 1)
},1000)
})
}
function fn(arg) {
return arg + ',' + 'end'
}
async function render() {
var a = await hell('2')
var b = await hell(a)
var c = await hell(b)
var d = await fn(c)
console.log(d)
}
render()