zoukankan      html  css  js  c++  java
  • vue-Promise的链式调用

      上一篇讲了promise的使用,这里不加赘述。但有时候会发现then里面的代码即使抽离出来还是很多,有没有办法再进行抽离呢?promise也提供这样的方式,能让回调后的代码进行一块一块地处理,代码如下:

      new Promise((resolve, reject) => {
        //执行异步请求
        $.get("test.cgi", {
            name: "John",
            time: "2pm"
          },
          function (data) {
            resolve(data)
          });
      }).then(data => {
        alert("Data Loaded处理1: " + data); //这里处理第一部分
        alert("Data Loaded处理1: " + data);
    
        return new Promise(resolve => { //调用下一个then
          resolve(data)
        })
      }).then((data) => {
        alert("Data Loaded处理2: " + data); //处理第二部分
        alert("Data Loaded处理2: " + data);
        alert("Data Loaded处理2: " + data);
    
        return new Promise(resolve => {
          resolve(data)
        })
      }).then((data) => {
        alert("Data Loaded处理3: " + data); //第三部分
        alert("Data Loaded处理3: " + data);
      })

      当然了,这里只是演示了resolve,但reject的使用也是差不多,是调用下一个catch而已;

      回归正题,我们发现进入到下一个then,要 return new Promise....,代码有点长,有没有简便写法呢?有,如下:

      new Promise((resolve, reject) => {
        //执行异步请求
        $.get("test.cgi", {
            name: "John",
            time: "2pm"
          },
          function (data) {
            resolve(data)
          });
      }).then(data => {
        alert("Data Loaded处理1: " + data);
        alert("Data Loaded处理1: " + data);
    
        return Promise.resolve(data)
      }).then((data) => {
        alert("Data Loaded处理2: " + data);
        alert("Data Loaded处理2: " + data);
        alert("Data Loaded处理2: " + data);
    
        return Promise.resolve(data)
      }).then((data) => {
        alert("Data Loaded处理3: " + data);
        alert("Data Loaded处理3: " + data);
      })

      你以为这样就最简便了?不,还有更简便的:

      new Promise((resolve, reject) => {
        //执行异步请求
        $.get("test.cgi", {
            name: "John",
            time: "2pm"
          },
          function (data) {
            resolve(data)
          });
      }).then(data => {
        alert("Data Loaded处理1: " + data);
        alert("Data Loaded处理1: " + data);
    
        return data
      }).then((data) => {
        alert("Data Loaded处理2: " + data);
        alert("Data Loaded处理2: " + data);
        alert("Data Loaded处理2: " + data);
    
        return data
      }).then((data) => {
        alert("Data Loaded处理3: " + data);
        alert("Data Loaded处理3: " + data);
      })
  • 相关阅读:
    【Java学习笔记】多线程
    【Java学习笔记】对象生命周期
    【算法实现】插入排序算法
    【Java学习笔记】修饰符
    伍迷创意随想集 之 聚众广告创精品
    《软件观念革命——交互设计精髓》读书笔记(一)
    《交互设计之路——让高科技产品回归人性》读书笔记(七)
    《交互设计之路——让高科技产品回归人性》读书笔记(一)
    伍迷创意随想集
    《软件观念革命——交互设计精髓》读书笔记(三)
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14614163.html
Copyright © 2011-2022 走看看