Promise

1.1 Promise

• ES6引入
• 异步编程的一种解决方案
• 常见于网络请求

1.1.1 Promise的基本使用

随笔

　　script 代码执行，一般情况是同步执行。

　　网路请求需要异步处理，异步任务 -> 回调函数。

　　当网络请求复杂的时候，就可能会出现回调地狱。

　　Promise就是解决这种地狱回调问题的优雅解决方案。

new Promise()

  // resolve,reject 本身又是两个函数
  new Promise((resolve, reject)=>{
    // 第一次异步调用
      setTimeout(()=>{
          resolve(‘hello world’);
      });   
  }).then((data)=>{
      // undo 第一次异步调用的回调代码
      console.log(data);// hello world
      
      // 第二次异步调用
      return new Promise((resolve, reject)=>{
          setTimeout(()=>{
              resolve(); // 成功
              // reject('err message'); // 失败
              // throw 'err message'
          });
      });
  }).then(()=>{
      // undo 第二次异步调用的回调代码
      
      // 第三次异步调用
      return new Promise((resolve, reject)=>{
          setTimeout(()=>{
              resolve();
          });
      });  
  }).then(()=>{
      //undo 第三次异步调用的回调代码
  }).catch((err)=>{
      console.log(err); // err message
  });
  
  //对异步的函数进行封装。
​
  // 链式调用 简写
  new Promise((resolve, reject)=>{
      setTimeout(()=>{
          resolve('aaa');
      },1000);
  }).then(res=>{
      console.log('first time do something'); // 正常输出
      return Promise.resolve(res + '111');
  }).then(res=>{
      console.log('second time do something'); // 正常输出
      return Promise.reject('err message');
  }).then(res=>{
      console.log('third time do something'); // 这次不会输出，被reject()截断了
  }).catch(err=>{
      console.log(err);  // err message
  });

 

1.1.2 对两个异步请求的协调

需求：同时发出两个请求，当两个请求都响应成功后的时候，进行下一步处理。

一般实现

let resultBack_1 = false;
let resultBack_2 = false;
$ajax({
    url: '',
    success: function(){
      console.log('first request back');
      resultBack_1 = true;
      handleResult();
    }
});
$ajax({
    url:'',
    success: function(){
        console.log('secend request back');
        resultBack_2 = true;
        handleResult();
    }
});
handleResult(){
    if (resultBack_1 && resultBack_2) {
       // do something
    }
}

Promise.all()方法实现

Promise.all([
    new Promise((resolve, reject)=>{
        $ajax({
            url: 'url_1',
            seccess: function(data_1){
                resolve(data_1);
            }
        });
    }),
    new Promise((resolve, reject)=>{
        $ajax({
            url: 'url_1',
            seccess: function(data_2){
                resolve(data_2);
            }
        });
    })
]).then( results => {
    console.log(results); // [data_1, data_2]
});

 后续可以在网上逐渐了解Promise的案例分析、面试题。