1.为什么会产生回调地狱
当我们需要在异步的末尾做一些事情的时候,我们就会用到回调函数。当回调函数嵌套过多的时候,我们的代码就没有可阅读性和可维护性,这种情况我们就称之为回调地狱。
2.promise
这个promise是es6的语法,是异步编程的一种解决方法,比传统的解决方法更强加,更合理。
3.promis的语法
let p1 = new Promise(function (resolve, reject) {})
p1.then(function () {
// 这个函数就是当你的 Promise 里面书写 resolve() 的时候,就会调用了
console.log(123)
})
这里的2个参数 : 如果成功了,就是 resolve,成功之后执行函数p1.then()
如果失败了,就是 reject,失败之后执行的函数p1.catch()
4.promise的高级应用
当你在这个 function 里面 return 一个新的 promise 对象的时候
可以继续.then() ,以ajax的请求计算sum为例:
new Promise(function (resolve) {
ajax({
url: './ajax1.php',
data: {
a: 100,
b: 200
},
dataType: 'json',
success: function (result) {
resolve(result)
}
})
})
.then(function (res) {
console.log(res) // 第一次请求的结果
return new Promise(function (resolve) {
ajax({
url: './ajax2.php',
data: res,
dataType: 'json',
success: function (result) {
resolve(result)
}
})
})
})
.then(function (res) {
console.log(res)
}
5.回调地狱的终极解决办法
就是想一个办法把异步代码写的 看起来像 同步代码
会用到es7的语法:async/await 函数
语法:
1> async 是一个关键字 要写在函数的前面
async function fn() {}
let fn = async () => {}
2> await 也是一个关键字 要写在函数的里面
await 关键字有一个作用,就是可以把 promise 本该再 then 里面接受的结果
直接再 await 前面定义一个变量来接受;
await 会把后面那个 promise 对象当作一个等待的对象;
await 后面行的代码会等到这个 promise 执行完毕以后再继续;
async function fn() {
console.log('start')
let res = await new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(123)
}, 1000)
})
console.log(res)
console.log('end')
}
fn()
上面的这个代码会先打印 strat,再打印end ,最后打印 res