1.Promise是什么

直接打印出来看看吧,console.dir(Promise),就这么简单粗暴
在这里插入图片描述
Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法
原型上有then、catch等同样很眼熟的方法。

这么说用Promise new出来的对象肯定就有then、catch方法喽,没错

new一个 Promise 看看是个啥吧。

var p = new Promise((resolve, reject) => {
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('随便什么数据');
    }, 2000);
});

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解,后面再细究概念。

在上面的代码中,我们执行了一个异步操作,也就是setTimeout,2秒后,输出“执行完成”,并且调用resolve方法。

运行代码,会在2秒后输出“执行完成”。注意!我只是new了一个对象,并没有调用它,我们传进去的函数就已经执行了,这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中,在需要的时候去运行这个函数,如:

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log('执行完成');
            resolve('随便什么数据');
        }, 2000);
    });
    return p;            
}
runAsync()
// 第一步:model层的接口封装
const promise = new Promise((resolve, reject) => {
    // 这里做异步任务(比如ajax 请求接口。这里暂时用定时器代替)
    setTimeout(function() {
        var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
        if (data.retCode == 0) {
            // 接口请求成功时调用
            resolve(data);
        } else {
            // 接口请求失败时调用
            reject({ retCode: -1, msg: 'network error' });
        }
    }, 100);
});

// 第二步:业务层的接口调用。这里的 data 就是 从 resolve 和 reject 传过来的,也就是从接口拿到的数据
promise.then(data => {
    // 从 resolve 获取正常结果
    console.log(data);
}).catch(data => {
    // 从 reject 获取异常结果
    console.log(data);
});

(Vue.prototype.$getBudgetCompInfo = bip => {
      return new Promise((resolve, reject) => {
        api({
          url: 'basicFunc/role-user-comparison/' + bip + '/2',
          method: 'get'
        })
          .then(response => {
            resolve(response.data)
          })
          .catch(error => {
            Toast.fail(error.msg)
            reject(error)
          })
      })
    }),
(Vue.prototype.$getUserInfo = () => {
        return new Promise((resolve, reject) => {
          api({
            url: 'system/user/me/info',
            method: 'get'
          })
            .then(response => {
              resolve(response.data)
            })
            .catch(error => {
              Toast.fail(error.msg)
              reject(error)
            })
        })
      }),
return new Promise((reslove, reject) => {
        this.wsRequest.get(
          "v3/serRecCtrl.do",
          {
            params: params
          },
          res => {
            reslove(res.data);
          }
        );
      });
return new Promise(resolve => {
        setTimeout(() => {
          this.pageScroll = this.pageScroll + 1;
          //this.onDateArrave();
          resolve();
        }, 500);
      });
  return new Promise((resolve, reject) => {
        ruleForm.validate((valid) => {
          resolve(valid);
        });
      });

转载于 ES6—new Promise()使用方法

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐