Promise 和async/await 的使用理解

 

Promise 和async/await 的使用理解

 

1. new Promise时就会开始执行语句。

　 new Promise(resolve => resolove('成功信息') )     简写：Promise.resolve('成功信息');

　 new Promise((resolve,reject) => reject('错误信息') ) 简写：Promise.reject('错误信息');

 

2. new Promise中的return data语句没啥用，而要使用resolve或reject

 

3. new Promise中resolve或reject前后的代码都会先执行

 

4. Promise中必须使用resolve和reject 这样then方法才会执行，否则不执行。

   

promise.then(function(value) {
  // 对应resolve的值
}, function(error) {
  // 对应异常或者reject的值
});

let p1 = new Promise((resolve, reject) => {
        //做一些异步操作
        setTimeout(() => {
            console.log('p1 - 执行完成');
            //reject('我是失败');
            resolve('我是成功！！');//必须使用resolve，不然后面不会执行
            console.log('p1 - 执行完成2');
          
        }, 2000);
    });

    let p2 = new Promise((resolve, reject) => {
        //做一些异步操作
        setTimeout(() => {
            console.log('执行完成2');
            resolve('我是成功2！！');
           //return '我是成功！！';
        }, 2000);
    });


 p1.then((data) => {
        console.log("1-"+data);
        return p2.then((data1) =>{
            console.log("p2 -1-"+data1);
            return "数据p2";
        })
        
    })
    .then((data) => {
        console.log("2-"+data);
        return data;
    })
    .then((data) => {
        console.log("3-"+data);
    },(err) => {
        console.log('3-rejected',err);
    }).catch((err) => {
        console.log('finally -rejected',err);
    });

5. then中，要返回数据要使用return ；否则后面的then接收到的数据是undefined

  then中，return data返回的数据会包装成Promise.resolve(data)继续调用then，后面的then能接收到data

       如果没有return语句，那么默认是一个空的Promise.resolve(undefined)，后面的then参数接收到的数据为undefined

  then中，return new Promise()，那么会等这个Promise调用完再执行then，即链式调用。

  then中，new Promise() 前没有return会异步执行，会立即执行后面的then，而不会等这个Promise执行完。

 

6. 异常处理，then中的第二个参数是接收错误的，会一步步通过then传下去，也可以用catch接收。

 

7. Promise.all用法：并行异步执行，所有都执行完

 

let Promise1 = new Promise(function(resolve, reject){})
let Promise2 = new Promise(function(resolve, reject){})
let Promise3 = new Promise(function(resolve, reject){})

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton(){
  // 三个都成功则成功  
}, function(){
  // 只要有失败，则失败 
})

 

8. Promise.race的用法：谁跑的快，以谁为准执行回调

  //请求某个图片资源
    function requestImg(){
        var p = new Promise((resolve, reject) => {
            var img = new Image();
            img.onload = function(){
                resolve(img);
            }
            img.src = '图片的路径';
        });
        return p;
    }
    //延时函数，用于给请求计时
    function timeout(){
        var p = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('图片请求超时');
            }, 5000);
        });
        return p;
    }
    Promise.race([requestImg(), timeout()]).then((data) =>{
        console.log(data);
    }).catch((err) => {
        console.log(err);
    });

 

9. async/await 简化Promise编码

     

• async/await是写异步代码的新方式，优于回调函数和Promise。
• async返回值是一个promise对象，async 函数内部return语句返回的值，会成为then方法调用函数的参数
• await命令后面跟着的是一个promise对象，如果不是会自动转化为promise对象
• await 关键字必须位于async函数内部
• async/await是基于Promise实现的，它不能用于普通的回调函数。
• async/await与Promise一样，是非阻塞的。
• async/await使得异步代码看起来像同步代码，再也没有回调函数。但是改变不了JS单线程、异步的本质。

//例子1 -Promise
const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return promise2(value1)
        .then(value2 => {        
          return promise3(value1, value2)
        })
    })
}

//例子1 - 等价的async/await 
const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

 

//例子2 -promise
request("ajaxA")
.then((data)=>{
   //处理data
   return request("ajaxB")
})
.then((data)=>{
   //处理data
   return request("ajaxC")
})
.then((data)=>{
   //处理data
   return request("ajaxD")
})

//例子2-等价的async/await
async function load(){
    await request("ajaxA");
    await request("ajaxB");
    await request("ajaxC");
    await request("ajaxD");
}