promise & axios & async_await 关于 Promise

原创

前端小tips

修改于 2021-11-24 13:52:20

1.4K0

修改于 2021-11-24 13:52:20

【1】Promise是什么

Promise 是ES6里面异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。简单说Promise 就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有三种状态，pending（进行中）、resolved（已完成）、rejected（已失败），特点是只有异步操作的结果，可以决定当前是哪一种状态，状态一旦改变，就无法再次改变状态；

Promise常用的方法：

1.类方法（静态方法）： (1)resolved：成功状态返回一个 Promise 对象； (2)reject：失败状态返回一个Promise 对象； (3)race：多个 Promise 任务同时执行，返回最先执行结束的 Promise 任务的结果，不管这个 Promise 结果是成功还是失败； (4)all：如果全部成功执行，则以数组的方式返回所有 Promise 任务的执行结果，如果有错误就返回reject的结果； 2.实例方法： (1).then：它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过，then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的 (2).catch：异常处理； (3).finally:不管 Promise 对象最后状态如何成功或失败，都会执行的操作

promise特点

1.对象的状态不受外界影响。 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果，这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

promise缺点

1.一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来 2.错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部 3.Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

正是因为这些原因，ES7引入了更加灵活多变的async，await来处理异步,后面我们说

【2】为什么出现Promise

业务上遇到一个请求要依赖前一个请求的结果，如果多个层层回调函数的嵌套叫做“回调地域”，代码不美观而且不易于维护，所以Promise出现了他的链式调用可以解决这一个问题

【3】怎么用Promise

//ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。

const promise = new Promise();

//Promise构造函数的参数是一个函数，该函数的两个参数分别是resolve和reject。resolve和reject也是函数，由 JavaScript 引擎提供，不用自己定义这两个函数。

内置的resolve函数的作用是：将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；resolve()可以用来传递参数给then

内置的reject函数的作用是：将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise举例：

const promise = new Promise(function(resolve, reject) {
   // ... some code
   if (/* 异步操作成功 */){
     resolve(value);//调用内置的resolve函数
   } else {
     reject(error);//调用内置的reject函数
   }
});
或者写成箭头函数
const promise = new Promise((resolve, reject)=> {
   // ... some code
   if (/* 异步操作成功 */){
     resolve(value);//调用内置的resolve函数
   } else {
     reject(error);//调用内置的reject函数
   }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

const promise = new Promise();
promise.then();

then方法可以接受两个回调函数作为参数。第一个是resolved状态的回调函数，第二个是rejected状态的回调函数。中间逗号衔接，这两个函数都是可选非必填的。它们都接受Promise对象传出的值作为参数。

then式链式写法的本质其实是一直往下传递返回一个新的Promise，也就是说then在下一步接收的是上一步返回的Promise，理解这个对于后面的细节非常重要！！

let promise = new Promise(function(resolve, reject) {
  // ... some code
  let name='jack'
?
  if(name=='jack'){
  // if (name!='jack'){
     resolve('成功啦'+name);//调用内置的resolve函数
  }else{
     reject('失败啦'+name);//调用内置的reject函数
  }
});
?
promise.then(function(value) {
    // 成功-这是resolved状态的回调函数
    console.log(value)//成功啦jack
}, function(error) {
    // 失败-这是rejected状态的回调函数
    console.log(error)//失败啦jack
});

核心用法：链式调用

Promise实例使用then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。又因为每一个Promise实例都有.then方法，因此可以采用链式写法，即then方法后面再调用另一个then方法。采用链式的then，可以有序调用回调函数。后一个 then会根据前一个then之后返回的Promise对象的状态(成功/失败)去决定走后一个then的成功回调还是失败的回调

const promise = new Promise((resolve, reject)=> {
   // ... some code
});
promise.then().then().then()...

//举例1秒后输出“成功”字符串
const MyPromise=function(time){
    let promise = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            resolve('成功');
        }, time);
    });
    return promise;            
}
//完整三层链式调用
MyPromise().then(function(succesData) {
    //第一个then的第一个回调是成功的
    console.log('结果是: ' + succesData);
},function(errorData) {
    //第一个then里的第一个回调是成功的
    console.error('出错了', errorData);
}).then(function(succesData) {
    //第二个then的第一个回调是成功的
    console.log('结果是: ' + succesData);
},function(errorData) {
    //第二个then里的第一个回调是成功的
    console.error('出错了', errorData);
}).then(function(succesData) {
    //第三个then的第一个回调是成功的
    console.log('结果是: ' + succesData);
},function(errorData) {
    //第三个then里的第一个回调是成功的
    console.error('出错了', errorData);
});

因为.then里面的两个函数参数是非必须的，一般只写第一个的成功的回调。有人要问既然有了很多的Promise对象那么多的then，那么我需不需要写很多catch来捕获错误呢？答案当然是：不需要！，哪有那么麻烦的写法，只需要在末尾catch一下就可以了，因为链式写法的错误处理具有“冒泡”特性，链式中任何一个环节出问题，都会被catch到，同时在某个环节后面的代码就不会执行了。所以可以把上面的简化下改写成

//简化三层链式调用并且改成箭头函数
MyPromise(1000).then(function(succesData) {
    //修改一下
    succesData=succesData+"1"
    //第一个then的成功回调
    console.log('第一个then拿到的数据：' + succesData);
    return succesData
}).then(function(succesData) {
    //修改一下
    succesData=succesData+"2"
    //第二个then的成功回调
    console.log('第二个then拿到的数据：' + succesData);
    return succesData
}).then(function(succesData) {
    //修改一下
    succesData=succesData+"3"
    //第三个then的成功回调
    console.log('第三个then拿到的数据：' + succesData);
    return succesData
}).catch((err)=>{ // 这里移到第一个链式去，发现上面的不执行了，下面的继续执行
  console.log(err);
})
?
promise的then链式调用仍然是层层依赖的逻辑但是不会像“地狱回调”那么不美观和不易于维护

promise & axios

axios 是由 promise 封装的一个 http 的库。axios本身就是一个promise。所以也继承一些个方法比如.then

比如axios我们通过then也可以用then的链式调用代替回调地狱注意return出去才是一个prominse对象才可以继续使用.then

  created(){
      this.$axios({
        method: 'post',
        dataType: 'json',
        url: '/customer/selectListByPage',
        data:{}
      }).then(function (res) {
          //第一层
          console.log(res.data)
          //需要return要不然后面拿不到输出时undefinded
          return res.data
      }).then(function (data) {
          //第二层
          console.log(data)
          return data     
      }).then(function (data) {
          //第三层
          console.log(data)
      }).catch((err)=>{
          console.log(err);
      })
  },

promise & async/await

async/await 是es7出来的，是es6的promise的升级版，更好地处理 then链式调用，await顾名思义就是‘等一下’（等一下我这个promise异步执行完你下面的再执行）让异步编程做起来更有同步的感觉。简单理解就是，async 声明的函数内的await异步会按照同步执行顺序。

【特点】（1）async声明的函数的返回本质上是一个Promise，所以可以用.then （2）async必须声明的是一个function，那么await就必须是在当前这个async声明的函数内部使用(而且不能在其子函数内使用)，他两个是配合使用的。

（3）await顾名思义就是等待一会，当且仅当await后面声明的是一个promise还没有返回值，那么下面的程序是不会去执行的！！！让异步编程做起来更有同步的感觉。

常用的申明async的方法： // 函数声明 async function foo() {} // 函数表达式 const foo = async function () {}; // 箭头函数 const foo = async () => {};

举个例子：3秒后才执行打印，异步的代码但是同步的feel这正是async/await配合Promise要实现的效果

const demo = async ()=>{
    //await申明的只有是一个Promise才可以实现异步的同步执行
    let result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        //do something
      }, 3000)
    });
    console.log('“我等一会”上面的程序执行完我在打印');
    return '我是返回值';
}
//async的返回值不管是什么类型本质是一个Promise所以可以用.then
demo().then(result=>{
    console.log('输出:',result); // 输出 我延迟了一秒
}).catch((err)=>{ 
    console.log(err);
})

和上面同样的代码只是await后面不是一个Promise，直接就执行了打印，3秒后才alert，所以await后面必须是一个Promise才可以异步代码同步执行

const demo = async ()=>{
    //await申明的不是Promise实现不了异步的同步执行
    let result = await setTimeout(()=>{
       //do something
       // resolve('我延迟了三秒')
       alert(1)
    }, 3000)
    console.log('“我等一会”上面的程序执行完我在打印');
    return '我是返回值';
}
//async的返回值不管是什么类型本质是一个Promise所以可以用.then
demo().then(result=>{
    console.log('输出:',result); // 输出 我延迟了一秒
}).catch((err)=>{ 
    console.log(err);
})

前面介绍async/await说到，通常async/await是跟随Promise一起使用的，而axios又是基于promise封装，所以我们可以将 async/await和axios 结合一起使用。网上很多都是把axios外面又套一层promise那是不科学或者没有理解axios的本质的做法，要知道：axios是promise封装的，本质就是一个promise，所以没必要去套一层promise

    const demo =async () => {
        //第一个异步promise（axios）接口请求数据
        const result1 = await this.$axios({
          method: 'post',
          dataType: 'json',
          url: '/customer/selectListByPage', 
          data:{}
        })
        console.log(result1)
        //第二个异步promise（axios）接口请求数据
        const result2 = await this.$axios({
          method: 'post',
          dataType: 'json',
          url: '/customer/selectListByPage', 
          data:{}
        })
        console.log(result2)
        //返回值实质上是一个promise
        return result1+result2
    }
    //调用
    demo().then(result=>{
      console.log('输出:',result); 
    }).catch((err)=>{ 
      console.log(err);
    })

还可以写成

    const getData1 = (data) => {
        //需要return保证async里面await调用的是一个promise
        return this.$axios({
          method: 'post',
          dataType: 'json',
          url: '/customer/selectListByPage', 
          data:{}
        })
    }
    const getData2 = (data) => {
        //需要return保证async里面await调用的是一个promise
        return this.$axios({
          method: 'post',
          dataType: 'json',
          url: '/customer/selectListByPage', 
          data:{}
        })
    }
    //async/await实例
    const demo =async () => {
        //第一个异步promise（axios）接口请求数据
        const result1 = await getData1()
        console.log(result1)
?
        //第二个异步promise（axios）接口请求数据
        const result2 = await getData2()
        console.log(result2)
?
        //返回值实质上是一个promise
        return result1+result2
    }
    //调用
    demo().then(result=>{
      console.log('输出:',result); 
    }).catch((err)=>{ 
      console.log(err);
    })

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript