Es6新特性：关于Promise的保姆级教程

1.Promise是什么？

Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和更强大。 ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

2.Promise的三种状态

1.初始化状态：pending（进行中）
2.当调用resolve时，状态由pending变为fulfilled（成功）
3.当调用reject时，状态由pending变为rejected（失败）
可能有的小伙伴这里看的比较懵，下面会用代码来给大家展示

3.创建Promise对象

这里的话我们就是用const声明了一个promise函数
promise对象可以有两个参数，resolve，reject，这两个参数执行之后，分别为把promise对象的状态改变为成功和失败

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功了");
    // reject('失败了')
  }, 2000);
});

我们这里用定时器来模拟数据的发送
重点：这里如果运行函数的话我们会发现不会输出任何结果！为什么呢？
原因的话是promise对象后要跟一个回调函数，我们看接下来的代码：

4.执行promise的回调函数

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功了");
    // reject('失败了')
  }, 2000);
});
p.then(
  (data) => {
      console.log(data);
  },
  (reson) => {console.error(reson)}
);


//output：2秒之后输出‘成功了‘

这里在上一版函数的基础上加了一个回调函数，这里的回调函数可以跟两个函数，一个是状态为成功时候的返回值（在上文中我们用data来传递参数），一个是状态为失败之后的返回值（我们用reson表示）

重点：因为上方我们创建promise对象的时候，我们用resolve将promise对象的状态由pending变为fulfilled（成功）了，所以下方回调函数为执行传参为data的回调函数，输出成功了。

如果是把promise对象的状态改为reject，下方回调函数会执行传参为reson的回调函数，输出失败了
如下代码：

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve("成功了");
    reject('失败了')
  }, 2000);
});
p.then(
  (data) => {
      console.log(data);
  },
  (reson) => {console.error(reson)}
);

//output：2秒之后输出‘失败了‘

• promise对象的回调函数里面还可以返回promise类型的对象

6.Promise对象的作用是什么？

因为回调函数里面还可以返回promise类型的对象，所以promise对象常常被用来解决回调地狱的问题
什么是回调地狱问题呢?我们来看下面的代码：

 	  setTimeout(() => {
        console.log("客户登录");
        setTimeout(() => {
          console.log("选购产品");
          setTimeout(() => {
            console.log("体验产品");
          }, 3000);
        }, 2000);
      }, 1000);

• 上诉函数就是一个最简单的回调问题：首先要获得客户登录的数据，然后根据客户登录的账号给客户推荐合适商品，然后跟据客户选购的商品数据，给客户免费体验相应的商品
• 这只是三层嵌套，如果是100层呢？这样的代码不仅不利于日后的维护，而且还显得很臃肿
• 下面我们用promise对象的方式来解决这样类型的问题

代码如下：

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("客户登录");
    // reject('失败了')
  }, 1000);
});
p.then(
  (data1)=>{
    return new Promise((resolve, reject) => {
      setTimeout(() => {
      	//返回data1和‘客户选购’组成的数组，这里的data1为上面promise对象resolve的‘客户登录’
        resolve([data1,'客户选购']);
        // reject('失败了')
      }, 2000);
    });
  }
).then(
  (data2)=>{
    return new Promise((resolve, reject) => {
      setTimeout(() => {
      	//data2=[ '客户登录', '客户选购' ]
      	//这里的data2为上面promise对象resolve的data1和‘客户选购’组成的数组
        data2.push('体验产品')
        resolve(data2);
        // reject('失败了')
      }, 2000);
    });
  }
  ).then(
    (data)=>{
    	//此时data为[ '客户登录', '客户选购', '体验产品' ]
      console.log(data);
    }
  )
//output:最后输出的结果为[ '客户登录', '客户选购', '体验产品' ]

-这样就解决了回调地狱的问题

7.扩展：利用promise封装AJAX函数

这里就不多bb了，直接上代码：

      const p = new Promise((resolve, reject) => {
        //创建对象
        const xhr = new XMLHttpRequest();
        //初始化
        xhr.open("GET", "https://api.uixsj.cn/hitokoto/get?type=social");
        //发送请求
        xhr.send();
        //绑定事件，处理响应结果
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
              resolve(xhr.response)
            } else {
              reject(xhr.status)
            }
          }
        };
      });
      p.then(
          (data)=>{
              console.log(data);
          },
          (reson)=>{
              console.log(reason);
          }
      )

---

小小萌新，瑟瑟发抖，还请各位大佬多多指教（拜谢拜谢拜谢）