什么是回调地狱
(函数
作为参数
层层嵌套
)
回调函数(一个函数
作为参数
需要依赖
另一个函数执行
调用)
如何解决回调地狱
保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨)
模块化(函数封装,打包,每个功能独立,可以单独的定义一个js文件Vue,react中通过import导入就是一种体现)
处理每一个错误
创建模块时的一些经验法则
promise/Generators生成器/ES6等
promise
的作用:ajax是异步
请求,多层嵌套会造成回调地狱
,promise
模拟同步
,将异步回调
类似于同步
来处理业务逻辑
。
Promises
:编写异步代码
的一种方式,它仍然以自顶向下
的方式执行,并且由于鼓励使用try / catch
样式错误处理而处理更多类型的错误
Generators
:生成器让你“暂停”
单个函数,而不会暂停整个程序
的状态,但代码要稍微复杂一些,以使代码看起来像自上而下地执行
Async functions
:异步函数是一个建议的ES7
功能,它将以更高级别的语法进一步包装生成器和继承
Async/Await
语法
async/await 的优势:可以很好地处理 then 链
使用async函数可以让代码简洁
很多,不需要像Promise
一样需要些then
,不需要写匿名函数
处理Promise
的resolve
值,也不需要定义多余
的data变量
,还避免了嵌套代码
。
Async/Await
让 try/catch
可以同时
处理同步和异步错误
async/await
是写异步代码
的新方式,以前的方法有回调函数和Promise
。
async/await
是基于Promise
实现的,它不能
用于普通的回调函数
。
async/await
与Promise
一样,是非阻塞
的。
async/await
使得异步代码
看起来像同步代码
。
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)
}
}
//使用aync/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)
}
}
条件语句
也和错误捕获
是一样的,在Async
中也可以像平时一般使用条件语句
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}
const makeRequest = () => {
return getJSON().then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data).then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}
const makeRequest = () => {
return promise1().then(value1 => {
return Promise.all([value1, promise2(value1)])
}).then(([value1, value2]) => {
return promise3(value1, value2)
})
}
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
async/await
能够使得代码调试
更简单
。
调试Promise不能
在返回表达式的箭头函数
中设置断点
.如果在.then
代码块中设置断点,使用Step Over快捷键,调试器不会
跳到下一个.then
,它只会跳过异步
代码。
await
命令后面的 Promise
对象,运行结果可能是rejected
,所以最好把 await
命令放在 try...catch
代码块中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一种写法
async function myFunction() {
await somethingThatReturnsAPromise().catch(function (err){
console.log(err);
});
}
网友评论