美文网首页
Promise链式调用

Promise链式调用

作者: 芒果加奶 | 来源:发表于2017-12-06 18:10 被阅读0次

一、Promise对象

承诺一定会实现,更简单的处理异步请求。同时更加方便使用链式调用。
缺点:Promise对象状态不会改变,Promise操作不可中断,只要执行无法取消,也无法确定内部执行的状态。

1.语法

new Promise( function(resolve, reject) {...} /* executor */  );

2.状态

  • pending:初始状态
  • fulfilled:操作成功完成
  • rejected:操作失败

3.方法

Promise.prototype.catch(onRejected)
添加一个否定(rejection) 回调到当前 promise, 返回一个新的promise。如果这个回调被调用,新 promise 将以它的返回值来resolve,否则如果当前promise 进入fulfilled状态,则以当前promise的肯定结果作为新promise的肯定结果。——MDN
Promise.prototype.then(onFulfilled,onRejected)
添加肯定和否定回调到当前 promise, 返回一个新的 promise, 将以回调的返回值 来resolve。——MDN

二、Promise使用(三个表格联动)

先是掉第一个接口数据,拿到数据的第一个数据后作为参数掉第二个接口,在拿到数据后,作为第三个参数掉第三个接口。

重点:使用链式调用

// 链式调用的前提要return Promise对象,返回后才能使用then()方法调用到
getProviceList: ({commit, state}, params) => {
    return API.getProviceListApi(params).then(res => {
      commit(types.HIDE_PAGE_LOADING)
      commit(types.GET_PROVICE_LIST, res.data)
      return res.data
    }, function () {
      console.log('错误')
    })
  }
// 三个接口链式调用
 this.getNormalList()// 第一个
.then((res) => {//第二个
    this.modelId = res[0].MODELID
      this.getNormalProvinceList({
        'mobileCode': this.modelId
    })
.then((res) => {// 第三个
    this.provinceId = res[0].ID
        this.getNormalDataList({
          'provinceCode': this.provinceId,
          'mobileCode': this.modelId
        })
     })
    })

效果图


表格三级联动

相关文章

  • js promise图解

    链式调用 封闭promise

  • 嵌套的promise执行顺序

    外部promise有多个then链式调用,第一个then里面执行另一个promise,也带多个then链式调用,他...

  • Promise链式调用

    做了一个博客项目,有一个过程如下: 封装request函数(用axios发送请求),axios会返回一个promi...

  • Promise链式调用

    一、Promise对象 承诺一定会实现,更简单的处理异步请求。同时更加方便使用链式调用。缺点:Promise对象状...

  • Promise 链式调用

    Promise status状态,有三种状态pendding、resolved、rejected,状态由 pend...

  • ES6

    AJAX 异步网络请求 Promise 使用了Promise对象之后可以链式调用的方式组织代码 Promise.a...

  • 手写Promise

    1. 简易版Promise,只能调用一次then,不能链式调用:

  • Promise用法详解

    参考promise|深入理解 promise:promise的三种状态与链式调用 Promise对象只有三种状态 ...

  • async和await

    promise链 原来用promise的链式调用方式,then 中原本就返回了一个promise async 函数...

  • 八(2)Promise模拟(姜) ------ 2020-05-

    1、基础的Promise的实现 2、实现then的链式调用

网友评论

      本文标题:Promise链式调用

      本文链接:https://www.haomeiwen.com/subject/lcaluxtx.html