Promise手把手教学

promise是异步编程的一种解决方案。回调地狱终结者。

---

前言-什么是promis

promise是异步编程的一种解决方案

应用场景：常见于网络请求(回调地狱)

我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的 1+1=2一样将结果返回。
往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
但是当网络请求非常复杂时，就会出现回调地狱

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、使用：(链式编程)

  //参数-函数(resolve,reject)
  //resolve,reject本身是一个函数
  new Promise(
      (resolve,reject)=>{
         setTimeout(()=>{
            //Promise是优雅的，这里只请求不处理，去then
            //成功后调用resovle
            resolve("hello world");
            //失败后调用reject
            reject("error message");
         })
      }
  ).then((data)=>{
      //处理接收到的hello world
  }).catch(err =>{
      //失败处理，箭头函数只有一个参数可以省略
  });

二、Promise的三种状态

| sync->同步 | async->异步 |

执行异步操作后有三种状态

 pending；等待状态，比如正在进行网络请求，或则定时器没有到达时间。
 fulfill；满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
 reject；拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

//不写catch，在then中传两个参数，一个成功，一个失败
new Promise(
      (resolve,reject)=>{
         setTimeout(()=>{
            //Promise是优雅的，这里只请求不处理，去then
            //成功后调用resovle
            resolve("hello world");
            //失败后调用reject
            reject("error message");
         })
      }
  ).then((data)=>{
      //处理接收到的hello world
  },(err)=>{
      //处理失败接收到的error message
  });

---

Promise链式调用

无论then还是catch都可以返回一个promise对象，所以代码是可以进行链式调用的。

 Promise.resolve()：将数据包装成Promise对象，并且在内部回调resolve函数
 Promise.reject()：将数据包装成Promise对象，并且在内部调用reject对象

简单示范：

 //原理简单示范
     new Promise((resolve,reject)=>{
         resolve(res);
     }).then((res)=>{
         return new Promise((resolve,reject)=>{
             resolve(res);
         }).then(res=>{

         })
     })

高级写法：

//升级：
         new Promise((resolve,reject)=>{
         resolve(res);
         }).then((res)=>{
             return  Promise.resolve()
         }).then(res=>{

         });

三、Promise的all方法使用

两个以及以上 的请求。要求都完成

Promise.all([

       //第一个promise
       new Promise((resolve,reject)=>{
           resolve();
       }).then(),

       //第二个promise
       new Promise((resolve,reject)=>{
           resolve()
       }).then();

   ]).then(results =>{
       //等两个都完成，使用results[0],results[1]
   })

总结

new一个promise对象，箭头函数大妙用，resolve成功调用，reject失败调用。
成功跳到.then，失败跳到.catch。
当然，也可以直接.then里面传两个箭头函数，一个成功res，一个失败err。