对Promise的理解

什么是Promise;

概念：Promise 代表一个异步操作；

1. 创建Promise对象；

// 创建了一个Promise对象；
new Promise()
// 注意：这只是一个【形式上】的异步操作；因为你不知道里面要干什么；是读文件还是发网络请求呢？
优点：
// 1、可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
缺点：
// 1、无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。
// 2、其次，如果不设置回调函数， Promise 内部抛出的错误，不会反应到外部。
// 3、当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

基本用法;

1. ES6 规定， Promise 对象是一个构造函数，用来生成 Promise 实例;
2. Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个
   函数，由 JavaScript 引擎提供，不用自己部署。
   1. resolve: 在异步操作成功时调用 ;
   2. reject: 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
3. Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数 。

const promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // 异步操作成功时的回调
  }, function(error) {
  // 异步操作失败时的回调
  });

4.	`then`方法；

<script>
// 将一个异步代码包装到 Promise 中
// 1、定义一个函数
function request(url) {
  // 2、在函数中 return 出一个 Promise 对象
  return new Promise((resolve, reject) => {
    // 3、在 Promise 容器中执行异步操作
    // 创建请求对象
    var oReq = new XMLHttpRequest();

    // 添加请求回调函数
    // 请求成功，就会自动执行该回调函数
    oReq.addEventListener("load", function () {

      // 当请求成功了，也就是异步执行结束了，callback 被调用了
      resolve(this.responseText)

      // 只有这里才能拿到正确的响应结果 responseText 但是在外面取不到；
      // return this.responseText
    });

    oReq.addEventListener("error", function (err) {
      // 失败 reject
      reject(err)
    });

    // 设置请求方法和请求路径
    oReq.open("GET", url);

    // 发出请求
    oReq.send();
  })
}

// then 方法之后可以继续 then
// 原因是 then 方法执行完以后会返回一个新的 Promise 对象
request('http://jsonplaceholder.typicode.com/posts')
  .then(data => {
    // 如果是普通数据，那么它会把该数据包装为那个返回的 Promise 的 resolve 结果
    // return new Promise((resolve) => {
    //   resolve('hello')
    // })

    // 因为每个 then 始终返回 promise 对象
    // 所以我才可以在后面继续 .then
    // 每一个后续的 .then 都是在给上一个 then 中返回的 Promise 对象注册：resolve、reject

    // 如果你返回的数据就是一个 Promise 对象，那它就不做任何处理了
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('hello')
      }, 2000)
    })
  })
  .then((data) => {
    return ptimeout(1000)
  })
  .then(() => {
    console.log(3)
  })

function ptimeout(time) {
  return new Promise((resolve) => {
    setTimeout(function () {
      resolve()
    }, time)
  })
}

// Async 函数，简化了 Promise 的结果获取而已
</script>

异常处理；

1.  处理 Promise 中的异常有两种方式：  
   

   • then方法的第2个参数;
   • 或者 .catch 方法 ;

// 失败 then 方法的第2个参数来接收处理异常
request('dbsjabdjsabjdsa')
  .then(data => {
    console.log('请求成功', data);
  }, err => {
    console.log('请求失败', err);
  });
// 使用 .catch 方法接收处理异常
request('dbsjabdjsabjdsa')
  .then(data => {
    console.log('请求成功', data);
  })
  .catch(err => {
    console.log('请求失败', err);
  });

request('http://jsonplaceholder.typicode.com/posts')
  .then(data => {
    console.log('请求成功', data);
  })
  .catch(err => {
    console.log('请求失败', err);
  })
// 无论成功或是失败都会执行
  .finally(() => {
    console.log('无论成功或是失败都会执行');
  });