Promise 对象

1.什么是Promise对象

promise是ES6所提供的的，Promise 对象代表了将要发生的事件，用来传递异步操作的消息。主要可以解决回调地狱的问题

2.promise的优缺点

优点：promise最主要的优点就是解决回调地狱。
缺点：第一， promise无法取消，一旦新建它就会立即执行，无法中途取消。第二，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段。

3.创建promise对象

创建promise我们可以使用new关键字调用promise构造器来创建

var promise = new Promise(function(resolve, reject) {
    // 异步处理
    
    // 处理结束后、调用resolve 或 reject
});

promise 构造函数包含一个参数和一个带有 resolve和 reject两个参数的回调。如果一切都正常，则调用 resolve，否则调用 reject。

var myPromise = new Promise(function(resolve, reject){
    //当异步代码执行成功时，我们会调用resolve, 当异步代码失败时就会调用reject
    setTimeout(function(){
        resolve("执行成功!"); //代码正常执行！
    }, 300);
});
 
myPromise.then(function(callback){
    //callback的值是上面调用resolve方法传入的值.
    //callback参数不一定是字符串类型
    document.write("Hello World ！" + callback);
});

4.Promise解决回调地狱

// 声明一个函数
function fn(data, callback) {
    data++;
    callback(data);
}

// 回调地狱
fn(1, function(data) {
    fn(data, function(data) {
        fn(data, function(data){
            fn(data, function(data){
                        console.log(data);// 5
            })
        })
    });
});

使用promise解决回调地狱问题

function foo(data) {
    // 创建并返回一个包含实际的异步操作的Promise对象
    return new Promise(function(resolve,reject) {
        // 在这里执行一个异步操作
        if('ajax请求出现错误') return reject('错误内容')
        resolve('成功之后需要用到的数据或内容')
    });
}

// 接收实例对象
var pro = foo(data);
// 通过.then方法指定成功和失败的回调
pro.then(function(data){
    // 第一个是成功的回调函数
}, function(err){
    // 第二个是失败的回调函数
})
// 解决回调地狱问题
foo(data)
    .then(function(newData1){
    // newData就是异步操作得到的数据或内容
    // 这里用来放成功之后如何处理
    // 数据处理完成后如果还需要执行嵌套的类似操作
    return foo(newData2)
}).then(function(newData3){
    return foo(newData4)
}).then...
  .then(function(result){
        // 结束数据处理,输出数据
        console.log(result)
    })

5.Promise其他方法

5.1静态方法

首先介绍的就是resolve和reject方法

  //resolve()方法
   const pro1 = Promise.resolve(2);
   /*这样写相当于
   const pro1 = new Promise((resolve, reject) => {
           resolve(2)
      })*/
   pro1.then(res => {
         console.log(res);
      }) 

  //reject()方法 
  const pro2 = Promise.reject(3);
  pro2.catch(res => {
          console.log(res);
      })

Promise.all和Promise.race方法

Promise.all 请求同时发出去 等到所有的请求响应完成之后 才会调用then方法进行处理
Promise.race 请求同时发出去, 谁响应最快 就调用then方法处理返回的结果 其他不管

      const rq1 = new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve("第一个请求");
            }, 1000)
        })
      const rq2 = new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve("第二个请求");
            }, 3000)
        })
      const rq3 = new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve("第三个请求");
            }, 2000)
        })
       Promise.all([rq1,rq2,rq3]).then(res => {
            console.log(res); //["第一个请求", "第二个请求", "第三个请求"]
        })
       Promise.race([rq1,rq2,rq3]).then(res => {
             console.log(res);//第一个请求
        })

5.2 async 和 await 方法

async的作用 : 是为了简化在函数返回值中对promise对象的创建
async的用法 : 用于修饰函数 放在函数声明的最前面 被修饰的函数返回值一定是一个Promise对象
注意： await关键字必须出现在async的函数中
await的用法 : 用在某个表达式的前面 这个表达式的返回值是一个Promise对象
那么得到的是这个Promise对象调用then方法得到的状态数据

        async function fn() {
           return 1;
         }
        // 等同于一下代码 : 
         function fn() {
             return new Promise((resolve, reject) => {
                 resolve(1);
            })
         }

有一点要特别注意的是async 和 await 方法一般都是配合使用的。一般在普通函数前加上async，调用的时候和普通函数一样，直接调用。await后面接的一般是promise对象， 返回值是调用then方法之后状态数据。

        function delay(timer, text) {
            const promise = new Promise((resolve, reject) => {
                setTimeout(function() {
                    resolve(text);
                }, timer)
            })
            return  promise;
        }
        async function test() {
            console.log("action");
            const res1 = await delay(1000, "1");//间隔1秒后执行
            console.log(res1);

            const res2 = await delay(1000, "2");//上一段代码执行完后间隔1秒后执行
            console.log(res2);

            const res3 = await delay(1000, "3");//上一段代码执行完后间隔1秒后执行
            console.log(res3);

            console.log("end");
        }
        test();