关于ES6的promise和ES7的yield

关于ES6的promise和ES7的yield

 

 

 

1.promise

1 基本概念

---

• 名称：
  译为“承诺”，这也就表达了将来会执行的操作，代表异步操作；
• 状态：
  一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。
• 特点：
  (1)只有异步操作可以决定当前处于的状态，并且任何其他操作无法改变这个状态；
  (2)一旦状态改变，就不会在变。状态改变的过程只可能是：从pending变为fulfilled和从pending变为rejected。如果状态发生上述变化后，此时状态就不会在改变了，这时就称为resolved（已定型）

 

 

2 如何创造一个promise

 

如何创建一个promise（直接执行）

 const promise = new Promise((resolve,reject) => {

if(sucess) {

resolve(value);

}else {

reject(error)

}

)

注意：对于promose对象 如果直接使用new的话则会直接执行，想要定义则使用函数来定义这么一个异步操作

 

 方法2（异步操作不会立刻执行）

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

 

 

resolve和reject与then是什么关系

比如我们在resolve函数中定义的

   function runAsync(){

      var p = new Promise(function(resolve, reject){

          //做一些异步操作

          setTimeout(function(){

              console.log('执行完成');

              resolve('随便什么数据');

          }, 2000);

      });

      return p;

  }

  runAsync()

 

异步执行完runAsync后，如果再用

runAsync().then(res=>{

console.log(res);

})

此时就会打印出 '随便什么数据'

 

 

异步操作的reject和resolve在then中的回调体现

 

    function runAsync(){
      let p = new Promise(function(resolve, reject){
          //做一些异步操作
          setTimeout(function (){
            let  num=Math.ceil(Math.random()*10);
            if(num<5) {
resolve(num);
            }else{
              reject('数字太大了！')
            }
          }, 2000);
      });
      return p;
  };
  runAsync().then(function(data){
    console.log('resolve');
    console.log(data)
  },function(data) {
    console.log('reject');
    console.log(data)
  });

　　

最后如果这个数字大于5 则会打印出

Promise {<pending>}39787b1918052d26d1c92ea7ecfacad86e8dbfa2

VM296:19 reject

VM296:20 数字太大了！

 

3 promise.all

• 全部成功的话 则会返回所有执行成功的resolve的回调

 

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  resolve('p4 reject!');
});
var p5 = new Promise((resolve, reject) => {
  resolve('p5 resolve!');
});
 
 
Promise.all([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});

　　

Promise {<pending>}

VM412:18 (5) ["one", "two", "three", "p4 reject!", "p5 resolve!"]

 

参数中任意一个promise返回失败时，那么整体立即返回失败，返回的错误信息是第一个失败的promise结果。

 

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
var p4 = new Promise((resolve, reject) => {
  reject('p4 reject!');
});
var p5 = new Promise((resolve, reject) => {
  reject('p5 reject!');
});
 
 
Promise.all([p1, p2, p3, p4, p5]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
VM425:20 p4 reject!

　　

 

4 promise.race

race有赛跑之译，因此返回的新实例状态，是跟随参数中最先改变状态的那个实例；如果不是Promise实例，依旧先用Promise.resolve方法，转化后再进一步处理。

如果传的迭代为空，则返回的 Promise 永远等待

 

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'one');
});
var p2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 2000, 'two');
});
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, 'three');
});
 
 
Promise.race([p1, p2, p3]).then(values => {
  console.log(values);
}, reason => {
  console.log(reason)
});
Promise {<pending>}
VM446:12 one

　　

2.async和await

 

1基本概念https://www.haorooms.com/post/es67application

 

简单的停顿执行

var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve();
}, time);
})};
 
var start = async function () {
console.log('start');
await sleep(3000);
console.log('end');};
 
start();

　　

 

获得返回值

var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 返回 ‘ok’
resolve('ok');
}, time);
})};
 
var start = async function () {
let result = await sleep(3000);
console.log(result); // 收到 ‘ok’};
start()

　　

捕捉错误

var sleep = function (time) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
// 模拟出错了，返回 ‘error’
reject('error');
}, time);
})};
 
var start = async function () {
try {
console.log('start');
await sleep(3000); // 这里得到了一个返回错误
 
// 所以以下代码不会被执行了
console.log('end');
} catch (err) {
console.log(err); // 这里捕捉到错误 `error`
}};
start()