Promise 实际使用

Promise 实际使用 

   const p = new Promise((resolve, reject) => {
      fetchAPI.fetch({
        server: 'api',
        method: 'POST',
        path: '/europa/auth/v1/saas/system/validateApprentice',
        data: { apprenticeCode: row[0].accountId },
        isLoading: true,
      })
      .then(({ code, result, ...props }) => {
        if (+code === 0) {
          resolve(result);
        } else {
          reject(props.message);
        }
      });
    });
    const c = (res) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(res);
        }, 1000);
      });
    };

    p.then((res) => {
      this.setState({ manVisible: false, apprenticeCode: row[0].accountId, ownerOrg: row[0].ownerOrg });
      return c(res);
    })
    .then((r) => {
      console.log(111, r);
    })
    .catch((err) => {
      message.error(err);
    })

 实例2

// 封装
function ajax(url, data, callback) {
    var p = new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: data == null ? 'GET' : 'POST',
            dataType: "json",
            data: data == null ? '' : JSON.stringify(data),
            async: true,
            contentType: "application/json",
            success: function (resp) {
                callback(resp);
                resolve();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status == "401") {
                    window.parent.location = '/enterprise/enterprise_login.html';
                    self.location = '/enterprise/enterprise_login.html';
                } else {
                    alert(XMLHttpRequest.responseText);
                }
                reject();
            }
        });
    });
    return p;
}

// 调用
ajax('/prefix/entity1/action1',null, function(resp){
     //do something on response
     someData.attr1 = resp.attr1;
}).then(
     ajax('/prefix/entity2/action2', someData, function(resp){
          //do something on response
     }
).then(
     initVue() ;
).then(
     //do  something else
)

实例3

场景一：先调用getData1，再调用getData2，再调用getData3  ...

//创建一个Promise实例，获取数据。并把数据传递给处理函数resolve和reject。需要注意的是Promise在声明的时候就执行了。
var getData1=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:"index.aspx",
        success:function(data){
            if(data.Status=="1"){
                resolve(data.ResultJson)//在异步操作成功时调用
            }else{
                reject(data.ErrMsg);//在异步操作失败时调用
            }
        }
    });
})


var getData2= new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:"index.aspx",
        success:function(data){
            if(data.Status=="1"){
                resolve(data.ResultJson)//在异步操作成功时调用
            }else{
                reject(data.ErrMsg);//在异步操作失败时调用
            }
        }
    });
})

var getData3=new Promise(function(resolve,reject){
    $.ajax({
        type:"get",
        url:"index.aspx",
        success:function(data){
            if(data.Status=="1"){
                resolve(data.ResultJson)//在异步操作成功时调用
            }else{
                reject(data.ErrMsg);//在异步操作失败时调用
            }
        }
    });
})

getData1.then(function(res){
　　return getData2(res)
}).then(function(res){
　　return getData3(res)
}).then(function(res){
　　console.log(res)
}).cache(function(error){
　　console.log(error)
})

场景二：getData3的执行依赖getData1和getData2
//Promise的all方法，等数组中的所有promise对象都完成执行
Promise.all([getData1,getData2]).then(function([ResultJson1,ResultJson2]){
    //这里写等这两个ajax都成功返回数据才执行的业务逻辑

　　getData3()
})

 

4. async/await 初尝

       const query = async () => {
        return fetchAPI.fetch({
          server: 'api',
          method: 'POST',
          path: '/europa/auth/v1/saas/applypolicy/queryOne',
          isLoading: true,
          data: { policyId },
        })
        // eslint-disable-next-line no-shadow
        .then(({ code, result, message }) => {
          if (+code === 0) {
            console.log('query');
          } else {
            message.error(message);
          }
        });
        // this.props.actions.queryOne({ policyId });
      };
      const querySon = async () => {
        return fetchAPI.fetch({
            server: 'api',
            method: 'POST',
            path: '/europa/auth/v1/saas/insurance/contract/query',
            data: { policyId },
            isLoading: true,
          })
        .then(({ code, result, ...props }) => {
          if (+code === 0) {
            console.log('querySon');
            this.setState({ contactList: result });
          } else {
            message.error(props.message);
          }
        });
      };
      const initQuery = async () => {
        await query();
        await querySon();
      };
      initQuery();

5. promise 实现4的功能

 // promise
      const query = new Promise((resolve, reject) => {
        this.props.actions.queryOne({ policyId }, resolve);
        // fetchAPI.fetch({
        //   server: 'api',
        //   method: 'POST',
        //   path: '/europa/auth/v1/saas/applypolicy/queryOne',
        //   isLoading: true,
        //   data: { policyId },
        // })
        // // eslint-disable-next-line no-shadow
        // .then(({ code, result, message }) => {
        //   if (+code === 0) {
        //     resolve(result.policy.id);
        //   } else {
        //     message.error(message);
        //   }
        // });
      });
      const querySon = (r) => {
        return new Promise((resolve, reject) => {
          fetchAPI.fetch({
            server: 'api',
            method: 'POST',
            path: '/europa/auth/v1/saas/insurance/contract/query',
            data: { policyId: r },
            isLoading: true,
          })
        .then(({ code, result, ...props }) => {
          if (+code === 0) {
            resolve(result);
          } else {
            message.error(props.message);
          }
        });
        });
      };
      query.then((res) => {
        return querySon(res);
      }).then(result => this.setState({ contactList: result }));