---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

一文看懂JavaScript中的Promise

前端开发 蚂蚁 36℃ 0评论

一、Promise 是什么

ES6 异步编程的一种解决方案,比传统的方案(回调函数和事件)更加的合理和强大

好处 异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数

PromiseES6 提供的原生对象,用来处理异步操作
它有三种状态

  • pending: 初始状态,不是成功或失败状态。

  • fulfilled: 意味着操作成功完成。

  • rejected: 意味着操作失败。

    二、使用

    2.1 创建 Promise

    通过 new Promise 来实例化,支持链式调用

    new Promise((resolve, reject)=>{
    // 逻辑
    }).then(()=>{
    //当上面"逻辑"中调用 resolve() 时触发此方法
    }).catch(()=>{
    //当上面"逻辑"中调用 reject() 时触发此方法
    })

    2.2 执行顺序

    Promise 一旦创建就立即执行,并且无法中途取消,执行逻辑和顺序可以从下面的示例中获得
    如下,可修改 if 条件来改变异步结果,下面打印开始的数字是执行顺序
    在线调试此示例 - jsbin

    console.log('1.开始创建并执行 Promise')
    new Promise(function(resolve, reject) {
    console.log('2.由于创建会立即执行,所以会立即执行到本行')
    setTimeout(()=>{ // 模拟异步请求
      console.log('4. 1s之期已到,开始执行异步操作')
      if (true) {
          // 一般我们符合预期的结果时调用 resolve(),会在 .then 中继续执行
          resolve('成功')
      } else {
          // 不符合预期时调用 reject(),会在 .catch 中继续执行
          reject('不符合预期')
      }
    }, 1000)
    }).then((res)=>{
    console.log('5.调用了then,接收数据:' + res)
    }).catch((error)=>{
    console.log('5.调用了catch,错误信息:' + error)
    })
    console.log('3.本行为同步操作,所以先于 Promise 内的异步操作(setTimeout)')

    执行结果如下

    "1.开始创建并执行 Promise"
    "2.由于创建会立即执行,所以会立即执行到本行"
    "3.本行为同步操作,所以先于 Promise 内的异步操作(setTimeout)"
    "4. 1s之期已到,开始执行异步操作"
    "5.调用了then,接收数据:成功"

    2.3 用函数封装 Promise

    这是比较常用的方法,如下用 setTimeout 模拟异步请求,封装通用请求函数
    在线调试此示例 - jsbin

    // 这是一个异步方法
    function ajax(url){
    return new Promise(resolve=>{
      console.log('异步方法开始执行')
      setTimeout(()=>{
        console.log('异步方法执行完成')
        resolve(url+'的结果集')
      }, 1000)
    })
    }
    // 调用请求函数,并接受处理返回结果
    ajax('/user/list').then((res)=>{
    console.log(res)
    })

    执行结果

    "异步方法开始执行"
    "异步方法执行完成"
    "/user/list的结果集"

    三、高级用法

    3.1 同时支持Callback与Promise

    在线调试此示例 - jsbin

    function ajax(url, success, fail) {
    
    if (typeof success === 'function') {
      setTimeout(() => {
        if (true) {
          success({user: '羊'})
        } else if (typeof fail === 'function') {
          console.log(typeof fail)
          fail('用户不存在')
        }
      }, 1000)
    } else {
      return new Promise((resolve, reject) => {
        this.ajax(url, resolve, reject)
      })
    }
    
    }
    
    // callback 调用方式
    ajax('/user/get', (res)=>{
    console.log('Callback请求成功!返回结果:', res)
    }, (error)=>{
    console.log('Callback请求失败!错误信息:', error)
    })
    
    // Promise 调用方式
    ajax('/user/get').then((res)=>{
    console.log('Pormise请求成功!返回结果:', res)
    }).catch((error)=>{
    console.log('Promise请求失败!返回结果:', error)
    })

    执行结果

    Callback请求成功!返回结果: {user: "羊"}
    Pormise请求成功!返回结果: {user: "羊"}

    3.2 链式调用

    .then 支持返回 Promise 对象进行链式调用

    ajax('/user/info').then((res)=>{
    // 用户信息查询成功后,可以根据返回结果查询后续信息
    console.log('用户信息:', res)
    return ajax('/user/score')
    }).then((res)=>{
    console.log('用户成绩:', res)
    return ajax('/user/friends')
    }).then((res)=>{
    console.log('用户朋友:', res)
    })

    3.3 Promise.all

    Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
    在线调试此示例 - jsbin

    // 生成一个Promise对象的数组
    var promises = [2, 3, 5, 7, 11, 13].map(function(id){
    return new Promise((resolve, reject)=>{
      if (id % 3 === 0) {
        resolve(id)
      } else {
        reject(id)
      }
    });
    });
    Promise.all(promises).then(function(post) {
    console.log('全部通过')
    }).catch(function(reason){
    console.log('未全部通过,有问题id:'+reason)
    });

    执行结果

    未全部通过,有问题id:2

    Reference

    mozilla web docs

转载自:http://yelog.org/2020/10/20/know-javascript-promise/

转载请注明:有爱前端 » 一文看懂JavaScript中的Promise

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情