Promise--＞面试100%常考

一.回调函数

• 就是把函数 A 当作参数传递到 函数 B 中，在函数 B 中以行参的方式进行调用

function a(cb) {
  cb()
}

function b() {
  console.log('我是函数 b')
}

a(b)

• 为什么需要回调函数
  • 当我们执行一个异步的行为的时候，我们需要在一个异步行为执行完毕之后做一些事情
  • 那么，我们是没有办法提前预知这个异步行为是什么时候完成的
  • 我们就只能以回调函数的形式来进行
  • 就比如我们刚刚封装过的那个 ajax 函数里面的 success
  • 我们并不知道 ajax 请求什么时候完成，所以就要以回调函数的形式来进行

二.回调地狱

• 回调地狱，其实就是回调函数嵌套过多导致的*

   ajax({
            url: 'a',
            success: function () {
                ajax({
                    url: 'b',
                    success: function () {
                        ajax({
                            url: 'c',
                            success: function () {

                            }
                        })
                    }
                })
            }
        })

三.Promise 见MDN文档

面试会常考，它是es6中

• 作用：它是解决回调地狱的
• 承诺,es6 提供的一个语法,执行一个异步事件的时候,会把结果返回给你
• 语法：
  • new Promise(function (resolve, reject){要执行的异步事件}
  • promise有2个函数p.then成功，p.catch失败
  • resolve成功调用then，reject失败调用catch
  • 三个状态：pending 执行中、resolved 成功、rejected 失败

new Promise(function (resolve, reject) {
  // resolve 表示成功的回调
  // reject 表示失败的回调
}).then(function (res) {
  // 成功的函数
}).catch(function (err) {
  // 失败的函数
})

• promise 来解决多个 ajax 发送的问题

new Promise(function (resolve, reject) {
  ajax({
    url: '第一个请求',
    success (res) {
      resolve(res)
    }
  })
}).then(function (res) {
  // 准备发送第二个请求
  return new Promise(function (resolve, reject) {
    ajax({
      url: '第二个请求',
      data: { a: res.a, b: res.b },
      success (res) {
        resolve(res)
      }
    })
  })
}).then(function (res) {
  ajax({
    url: '第三个请求',
    data: { a: res.a, b: res.b },
    success (res) {
      console.log(res)
    }
  })
})

四.ASYNC/AWAIT

• async/await 是一个 es7 的语法，都是关键字

• async是异步操作，也是关键字，多行的是promise对象，它的前身是generator

• 这个语法是 回调地狱的终极解决方案

• 异步代码写的就看起来像一个同步代码了

async function fn() {
  const res = new Promise(function (resolve, reject) {
    ajax({
      url: '第一个地址',
      success (res) {
        resolve(res)
      }
    })
  })
  
  // res 就可以得到请求的结果
  const res2 = new Promise(function (resolve, reject) {
    ajax({
      url: '第二个地址',
      data: { a: res.a, b: res.b },
      success (res) {
        resolve(res)
      }
    })
  })
  
  const res3 = new Promise(function (resolve, reject) {
    ajax({
      url: '第三个地址',
      data: { a: res2.a, b: res2.b },
      success (res) {
        resolve(res)
      }
    })
  })
  
  // res3 就是我们要的结果
  console.log(res3)
}