promise的使用

1.含义：

Promise是es6新增的语法，是一种面向对象的编程方式

2.基本语法：

Promise构造函数实例化时需要传递参数 ，而且传递的参数必须是函数类型，该函数接收两个参数：reslove 和reject（这两个参数也是函数类型）

• 终值：resolve（）里传的数据，即成功时传的数据
• 拒因：reject（）里传的数据，即失败时传的数据

（1）Promise实例化对象上有三个方法：then（）；catch（）；finally（）

（2）两个参数的用法：

• 当我们调用resolve，实例对象就会调用then（）里的回调函数
• 当我们调用reject，实例对象就会调用catch（）里的回调函数

<script>

     // 实例化对象,并通过回调函数的形式进行传参(resolve,reject,两个都是函数)，
        const p1 = new Promise((resolve, reject) => {
            // 调用resolve，相当于调用then()里面的回调函数
            // resolve(11)
            // 调用reject，相当于调用catch里面的回调函数
            reject(22)
        })
        // 调用promise的实例对象方法
        p1.then(function (res) {
            console.log('执行resolve')
            console.log(res) //11
        })
        p1.catch(function (res1) {
            console.log('执行了reject')
            console.log(res1)//22
        })
      p1.finally()
<script/>

（3）promise实例的状态

每一个promise实例(p1)都会有三种状态：fulfilled 成功；rejected 失败；pending 等待

注意：一个promise实例只能有最终的一个状态，要么成功，要么失败。

• 等待状态：当我们刚创建出实例时是等待状态
• 成功状态：当调用resolve时，实例对象的状态会变成fulfilled（成功）
• 失败状态：当调用reject时，实例对象的状态会变成rejected （失败）

（4）promise用法（重要）

• 解决异步中回调函数的问题（全局异步，局部同步）
• 解决嵌套地狱（回调地狱） promise + await(async)

// 利用async ,全局是异步，局部是同步
    async function get() {
      // 请求a.php，获得值是res
      const res = await ajax({
        url: "./serve/a.php",
      });
      // 请求b.php,获得值是res1，
      const res1 = await ajax({
        url: "./serve/b.php",
        data: {
          // 在请求参数的时候，将a的值赋值给b的num，最终获得的值是res1
          num: res,
        },
      });
      // 请求c.php,获得值是res2
      const res2 = await ajax({
        url: "./serve/c.php",
        data: {
          //在请求参数的时候，将b的值赋值给c的num，最终获得的值是res2
          num: res1,
        },
      });
    }
    // 会当成一个异步的函数执行
    get();
    console.log('后面的代码') //先执行这行代码，在执行上面的

（5）promise的链式调用（用的比较多）

   // 每次实例调用完一个方法（then、catch、finally）都会返回一个新的promise实例
        const p1 = new Promise((resolve, reject) => {
            // resolve()
            reject()
        }).then(function () {
            console.log(p1) //promise实例化对象
        }).catch(function () {
            console.log(p1)//promise实例化对象
        }).finally(function () {
            // 处理一些公用的逻辑 不管promise是成功还是失败都要执行
            console.log(p1)
        })

3.await（es7语法）

（1）作用：等待一个promise实例对象，等待它的结果并拿到这个结果

（2）用法：

• 语法：const 最终的结果 = await promise实例
  • await必须包裹在一个异步函数里（给一个函数前加上async)

// 实例化对象
        const p1 = new Promise((resolve, reject) => {
            resolve('reason')
            // reject('reason')
        })
        p1.then(function (res) {
            console.log(res) //reason
        })
        p1.catch(function (err) {
            console.log(err) 
        })
        // await会等待实例对象的结果，p1状态可能是成功或者失败（终值或者拒因
        //注意：必须要包裹在异步函数里面，全局是异步，局部是同步
        async function fu() {
            const res = await p1  
            console.log(res) //res就是Promise实例最终结果
            // console.log(11) //11,会等上面的代码执行结束再执行
        }
        fu()
        // 给函数fn加上async 这个函数在执行的时候js会把它当成一个异步的函数执行
        console.log(22) //22，先打印这个，再从上往下执行

（3）常见的需求如下：

• 有一个请求A,有一个请求B,有一个请求C
• 如果B请求有一个参数 num 这个参数是A接口返回的
• 如果C请求有一个参数 num 这个参数是B接口返回的

总结：

1.Promise 有三种状态 ，分别是 pending 、 resolved 、rejected ，pending可以转换成另外两种状态。

2.resolved 状态下的 promise 只会触发 .then 方法，， rejected 状态 下的 promise 只会触发 .catch 方法。

3.无论 then  还是 catch  ，如果没有抛出异常.then 和 .catch  返回的都是一个 resolved 状态的 Promise 如果抛出异常   返回的都是一个 rejected 状态的 Promise

模仿一个接口请求

hotArticle(){

      this.hotLoading = true

     hotArticle(this.hotParama)

                 // 请求成功

                .then(res=>{

                    if(res.code == 200){

                        console.log(res)

                         this.hotLoading = false

                         this.tableData = res.data

                    }else{

                        

                        }

                })

                  // 抛出异常

                .catch((err)=>{

                        this.hotLoading = false

                  })

 }