当前位置: 首页 / 技术分享 / 正文
JavaScript学习笔记Promise

2020-07-02

web前端培训 JavaScript

  好程序员web前端培训JavaScript学习笔记Promisepromise 是一个 ES6 的语法

  Promise表示承诺的意思,它在语法上解决了传统的多层回调嵌套问题

HTML5大前端

回调函数

  • 什么是回调函数?
  • 就是把函数 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 语法
  • 语法:

PROMISE

new 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/AWAIT

async 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)}

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

好程序员公众号

  • · 剖析行业发展趋势
  • · 分享大厂面试心得
  • · 汇聚企业项目源码
  • · 下载全套高精尖教程

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-11-16(北京)

    开班盛况

    开班时间:2020-12-07(深圳)

    预约报名
  • 大数据+人工智能 <高端班>

    开班时间:2020-09-14(北京)

    开班盛况

    开班时间:2020-11-09(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-01-04(北京)

    预约报名

    开班时间:2020-07-20(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2020-07-20(上海)

    开班盛况

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况

    开班时间:2019-07-15(深圳)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号