Promise 详解

1、Promise的特点

• Promise 有一个参数，这个参数是一个回调函数，参数中又有两个参数resolve和reject，这两个参数也是两个回调函数，其中resolve必须写；
• 无论成功还是失败，都会返回一个Promise对象,继而用then和catch来处理这个Promise对象;
• 记住: 成功调resolve 执行then; 失败调reject 执行 catch；

2、什么情况下使用Promise?

• 一般情况下是有异步操作时，使用promise对这个异步操作进行封装;

3、Promise解决了什么：

• 一般情况下，如果请求成功，执行某个函数，看着比较混乱，一个回调还比较容易分清，如果是多个回调的话，代码易读性可想而知
  

4、模拟Promise 链式异步请求调用

  //需求模拟异步请求，假设页面加载后2秒后打印6个 你好 然后隔3秒后再打印 6 个vue.js 然后再隔3秒打印 米斯特付
        function fn(){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{            //只要是网络请求，都是在Promise那个对象里面,它的那个回调函数中,
                    resolve("你好！");      //请求结果的处理，都是在Promise下面的那个 .then 中做处理;
                },2000);
         }).then((resolve)=>{
             console.log(resolve)
             console.log(resolve)
             console.log(resolve)
             console.log(resolve)
             console.log(resolve)
             console.log(resolve)

             return new Promise((resolve,reject)=>{
                 setTimeout(()=>{
                     resolve("vue.js")
                 },2000);
             }).then((resolve)=>{
                 console.log(resolve)
                 console.log(resolve)
                 console.log(resolve)
                 console.log(resolve)
                 console.log(resolve)
                 console.log(resolve)

                 return new Promise((resolve,reject)=>{
                     setTimeout(()=>{
                         resolve("米斯特付");
                     },3000);
                 }).then((resolve)=>{
                     console.log(resolve)
                 });
             });
         });
        }
        //这种编程思维就是 Promise 的链式调用;
        fn();

这就是一个模拟的，最后会在浏览器控制台会2秒后打印6个 你好 然后隔3秒后再打印 6 个vue.js 然后再隔3秒打印 米斯特付；

• 可以最结果进行 return 处理，return之后的结果还是一个Promise 对象，所以可以接续 then 处理;
  

5、Promise 的三种状态：

6、Promise 同时发出多个异步请求：

详细例子如下：

  function fn2(resolve){
            return new Promise(resolve); //Promise括号中必须要有一个参数
        }
       Promise.all([
          fn2((resolve,reject)=>{
              setTimeout(()=>{
                  resolve("Promise");
              },2000)
          }),
          fn2((resolve,reject)=>{
              setTimeout(()=>{
                  resolve("all")
              },3000)
          })
       ]).then((resolves)=>{
            console.log(resolves)
       });
       //现在的 fn2 函数就像是 我们做项目时封装的一个 resquest异步请求函数;

打印结果如下图：

打印的是一个数组，数组中是两个异步请求的结果;