Promise封装异步操作

Promise是什么：

Promise是异步编程的一种解决方案。
JavaScript是单线程机制，所谓单线程就是按次序执行，执行完一个任务再执行下一个任务，同步就是一个单线程操作，同步编程会带来一个严重的问题------阻塞，即：假如用户在做某一个操作的时候，突然间进行一个异步操作（网络请求、计时器），而异步操作一般情况下是比较耗时的，此时代码执行到这个地方会出现阻塞，影响后续代码的运行，为了解决这个问题，我们一般在此时进行异步操作，即在发送网络请求的同时，继续执行后续代码，然后网络请求结束后，通过回调函数返回其结果。

同步操作遇到的问题：

以网络请求为例：第一次网络请求的结果中包含第二次网络请求的URL，第二次网络请求的结果中包含第三次网络请求的URL，第三次网络请求的结果中又包含第四次网络请求的URL…,此时就陷入了回调地狱，为了避免回调地狱的出现，使用Promise封装异步操作(此处也就是网络请求)。

Promise的三种所处的状态：

在Promise封装异步操作之后会有三种状态，pending:等待状态，比如正在进行网络请求，或者定时器没有到时间；fulfill：满足状态，当我们回调了resolve()函数时，就处于该状态，并且回调then()；reject：拒绝状态，当我们主动回调了reject时，就会处于该状态，并且会回调catch()方法

Promise的使用：

使用关键字new创建Promise实例对象，该Promise需要传入两个参数resolve 和 reject；resolve 和 reject本身又是两个函数。

new Promise((resolve, reject) => {
    
    
    // 网络请求
    setTimeout(() => {
    
    
      // 此处为了模仿网络请求成功与失败，将下方的resolve()注释：代表模仿的网络请求失败，执行catch(),若将reject()注释掉，代表网络请求成功，执行then()
      resolve("请求到了数据");
      // Promise不希望我们在此处处理网络请求的结果,希望在then()方法中处理
      // reject("数据请求失败");
    }, 1000)
  }).then(res => {
    
    
    // 此处的参数res代表成功请求到的数据
    console.log(res);
  }).catch(data => {
    
    
    // 此处的data代表网络请求失败后的错误信息
    console.log(data);
  });

  // 使用Promise封装真正的网络请求
  let ajaxRequest = new Promise((resolve, reject) => {
    
    
    $.ajax({
    
    
      type: "get",
      url: "url地址",
      dataType: "json",
      success: res => {
    
    
        resolve(res);
      },
      error: res => {
    
    
        reject(res);
      }
    });
  });
  // 网络请求成功的处理
  ajaxRequest.then(res => {
    
    
    listArr = res.data.banner.list;
    console.log(listArr);
  });
  
  // 网络请求失败的处理
  ajaxRequest.catch(res => {
    
    
    console.log(res.returnCode);
  });