浅谈对Promise的使用

• Promise简单上手
  Promise对象的出现用于解决传统的ajax请求嵌套回调的问题。Promise对象通过new 关键字创建，构造函数需要传递一个函数作为参数，并且该函数需要两个形参（resolve和reject）。如下

    let p = new Promise((resolve,reject) => {           
     })

promise对象共有三种状态为成功、失败和触发。
通常我们会在promise的构造函数中执行ajax查询，ajax查询成功则调用resolve方法，失败则调用reject方法。如下：

        let p = new Promise((resolve,reject) => {
                $.ajax({
                    url:"./data1.json",
                    data:{},
                    method:"get",
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })

当请求成功后，调用了resolve方法，一旦调用了该方法，则p对象的状态就置为成功，然后就会触发p对象的then方法。如下：

            let p = new Promise((resolve,reject) => {
                $.ajax({
                    url:"./data1.json",
                    data:{},
                    method:"get",
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })


            p.then(res => {
                console.log(res)
            })

结果：
这里ajax发送请求成功后我们调用resolve方法后触发了then方法的回调，我暂且理解为then回调为处理ajax请求成功的逻辑，catch回调为处理ajax请求失败的逻辑。

• then方法返回值
  then方法的返回值有两种情况，首先说明一下，then方法永远返回Promise对象。

1. then方法的返回值为非promise对象，如return 123

            let p = new Promise((resolve,reject) => {
                $.ajax({
                    url:"./data1.json",
                    data:{},
                    method:"get",
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })


            var result =  p.then(res => {
                console.log(res)
                return 123
            })

            console.log(result)

输出结果
当then方法的返回值为非promise对象是，则then方法的返回值为promise对象，且该对象的状态为成功，成功的值就是返回值。

2. then方法的返回值为promise对象

       let p = new Promise((resolve,reject) => {
                $.ajax({
                    url:"./data1.json",
                    data:{},
                    method:"get",
                    success(res){
                        resolve(res)
                    },
                    error(err){
                        reject(err)
                    }
                })
            })


            var result =  p.then(res => {
                console.log(res)
                return new Promise((resolve,reject) => {

                })
            })

            console.log(result)

结果：
当then方法返回的promise对象的函数中没有调用resolve或者reject，则返回的promise对象的状态为触发状态。

调用resolve方法

  var result =  p.then(res => {
                console.log(res)
                return new Promise((resolve,reject) => {
                    resolve("Hello")
                })
            })

            console.log(result)

如果调用了resolve的返回的promise对象的状态就为成功，此时就会调用这个对象的then方法。同样，如果调用的reject则会调用该对象的catch方法

利用这个特性我们就可以进行链式调用，解决回调嵌套问题。

案例：利用Promise顺序读取文件

 function axiosPost(url,data){
               return new Promise((resolve,reject)=>{
                    $.ajax({
                        url,
                        data,
                        method:"get",
                        success(res){
                            resolve(res)
                        },
                        error(er){
                            reject(er)
                        }
                    })
               })
           }

           axiosPost("./data1.json",{})
            .then(res => {
                console.log(res)
                return axiosPost("./data2.json",{})
            })
            .then(res => {
                console.log(res)
                return axiosPost("./data3.json",{})
            })
            .then(res => {
                console.log(res)
            })
           }

首先我们调用了 axiosPost函数，返回了Promise对象，而且在第一次调用中请求了data1.json文件进行了输出，在then方法中又调用了axiosPost方法，此时then方法的返回值是一个Promise对象，那既然是一个Promise对象，则该对象的状态取决于对象构造函数中调用了哪个方法，请求成功以后调用resolve，则该对象的状态为成功，一旦为成功触发then方法，继续请求data3.json。这样写的代码不会出现多层嵌套，很方便解决了回调地狱问题。