好程序员web前端培训JavaScript学习笔记Promise

当前位置：首页 / 技术干货 / 正文

2020-07-02

JavaScript

　　好程序员web前端培训JavaScript学习笔记Promise，promise 是一个 ES6 的语法
　　Promise表示承诺的意思，它在语法上解决了传统的多层回调嵌套问题
回调函数什么是回调函数？
就是把函数 A 当作参数传递到 函数 B 中
在函数 B 中以行参的方式进行调用
function a(cb) {
    cb()}function b() {
    console.log('我是函数 b')}a(b)
为什么需要回调函数
当我们执行一个异步的行为的时候，我们需要在一个异步行为执行完毕之后做一些事情
那么，我们是没有办法提前预知这个异步行为是什么时候完成的
我们就只能以回调函数的形式来进行
一个典型的定时器setTimeout(function(){
    console.log("回调函数执行了")}, 2000)
回调地狱当一个回调函数嵌套一个回调函数的时候
就会出现一个嵌套结构
当嵌套的多了就会出现回调地狱的情况
比如我们发送三个 ajax 请求
diyi个正常发送
第二个请求需要diyi个请求的结果中的某一个值作为参数
第三个请求需要第二个请求的结果中的某一个值作为参数
ajax({
  url: '我是diyi个请求',
  success (res) {
    // 现在发送第二个请求    ajax({
      url: '我是第二个请求'，
      data: { a: res.a, b: res.b },
      success (res2) {
        // 进行第三个请求        ajax({
          url: '我是第三个请求',
          data: { a: res2.a, b: res2.b },
  success (res3) { 
            console.log(res3) 
          }
        })
      }
    })
  }})
回调地狱，其实就是回调函数嵌套过多导致的
当代码成为这个结构以后，已经没有维护的可能了
所以我们要把代码写的更加的艺术一些
为了解决回调地狱
我们就要使用 promise 语法
语法：
PROMISEnew Promise(function (resolve, reject) {
    // resolve 表示成功的回调    // reject 表示失败的回调}).then(function (res) {
    // 成功的函数}).catch(function (err) {
    // 失败的函数})
promise 就是一个语法
我们的每一个异步事件，在执行的时候
都会有三个状态，执行中 / 成功 / 失败
 
因为它包含了成功的回调函数
所以我们就可以使用 promise 来解决多个 ajax 发送的问题
new Promise(function (resolve, reject) {
    ajax({
        url: 'diyi个请求',
        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)
        }
    })})
这个时候，我们的代码已经改观了很多了
基本已经可以维护了
但是对于一个程序员来说，这个样子是不够的
我们还需要更加的简化代码
所以我们就需要用到一个 es7 的语法了
叫做 async/await
async/await 是一个 es7 的语法
这个语法是 回调地狱的终极解决方案
语法：
ASYNC/AWAITasync function fn() {
    const res = await promise对象}
这个是一个特殊的函数方式
可以 await 一个 promise 对象
可以把异步代码写的看起来像同步代码
只要是一个 promiser 对象，那么我们就可以使用 async/await 来书写
async function fn() {
  const res = new Promise(function (resolve, reject) {
    ajax({
        url: 'diyi个地址',
        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)}
这样的异步代码写的就看起来像一个同步代码了