ES6入门教程——15、ES6 Promise 对象——异步编程的解决方案

Promise 是一个对象,从它可以获取异步操作的消息。

Promise 状态

Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。

const p1 = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
}); 
const p2 = new Promise(function(resolve,reject){  
    resolve('success3'); 
    reject('reject');
});
p1.then(function(value){  
    console.log(value); // success1
});
p2.then(function(value){ 
    console.log(value); // success3
});


//then的基本用法,参数中第一个函数是成功返回函数,第二个参数是失败返回函数
  promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });

Promise 方法

Promise.all 的使用
如果传入的参数中存在不是Promise实例,则会先调用Promise.resolve,将其转为Promise实例,再进一步处理。

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 

Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); 
});

//  [3, 1337, "foo"] 

Promise.all实现多个异步请求

 initData(code) {
      this.loading = true
      let p1 = new Promise((resolve, reject) => {
        favourableApi
          .timeQuery({ favourableCode: code })
          .then(res => {
            resolve(res)
          })
      })
      let p2 = new Promise((resolve, reject) => {
        favourableApi
          .query({
            favourableCode: code
          }).then(data => {
            resolve(data)
          })
      })
      Promise.all([p1, p2]).then(arry => {
        let data1= arry[0]//第一个异步返回
        let data2= arry[1]//第二个异步返回
        this.loading = false
      })
    },

Promise.race 的使用
race是竟跑的意思,因此返回的新实例状态,是跟随参数中最先改变状态的那个实例;如果不是Promise实例,依旧先用Promise.resolve方法,转化后再进一步处理。如果传的迭代为空,则返回的 Promise 永远等待 。

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one-resolve-500');
});

var promise2 = new Promise(function(resolve, reject) {
    setTimeout(reject, 400, 'two-reject-400');
});

Promise.race([promise1, promise2]).then(function(value) {
    console.log(value);
}, function(err) {
    console.log(err);
});

// two-reject-400

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章