promise和async/await的写法例子(备份前端网)

针对vue的axios封装的 promise与 await

async changeSise() {
      let p = await new Promise(function(resolve, reject) {
        SourceMirror.fourColortInfo().then(res => {
          if (res.data.code == 200) {
            resolve(res.data.data)
          } else {
            reject(res.data.msg)
          }
        });
      });
      console.log('四色p', p);
}

 

先来ES6的promise的写法

eg1

function text() {
            return new Promise(function(resolve, reject) {
                var time = Math.random() * 2;
                console.log(time);
                //做一些异步操作
                setTimeout(function() {
                    if (time > 1) {
                        console.log('执行完成');
                        resolve('resolve');
                    } else {
                        console.log('执行失败');
                        reject('reject');
                    }

                }, 2000);
            });
        }
        text().then((res) => {
            console.log(res)
        }).catch((err) => {
            console.log(err)
        })

var p = new Promise(function(resolve, reject){
                    var time = Math.random()*2;
                    console.log(time);
                    //做一些异步操作
                    setTimeout(function(){
                        if(time > 1){
                            console.log('执行完成');
                            resolve('resolve');
                        }else{
                            console.log('执行失败');
                            reject('reject');
                        }

                    }, 2000);
                });
                p.then((res)=>{
                    console.log(res)
                }).catch((err)=>{
                    console.log(err)
                })

ES7的async/await几种写法

eg1

async  function text(){
            return new Promise(function(resolve, reject){
                    var time = Math.random()*2;
                    console.log(time);
                    //做一些异步操作
                    setTimeout(function(){
                        if(time > 1){
                            resolve('resolve');
                        }else{
                            reject('reject');
                        }

                    }, 2000);
                });
        }
        async function dq(){
            try{
                var data = await text();
                console.log(data);
            }catch(e){
                console.log(e)
            }
            /**如果只写这句，不写上面的try,catch，当time<1时，直接会reject报错
            为了能够提取到reject的错误，得在catch里面拿
            console.log(await text())
            **/
        }
        dq()

eg2

var p = new Promise(function(resolve, reject){
  var time = Math.random()*2;
  console.log(time);
  //做一些异步操作
  setTimeout(function(){
    if(time > 1){
      console.log('执行完成');
      resolve('resolve');
    }else{
      console.log('执行失败');
      reject('reject');
    }

  }, 2000);
});
async function te(){
  await p;
}
async function es(){
  try{
    await te()
  }catch(e){
    console.log(e)
  }
}
es()

总结:

ES6>promise相对简单，没有什么多说的，直接把resolve看做成success的回调，在then里面调用,reject看做成err的回调，在catch里面调用

p.then((res)=>{
  console.log(res)
},er=>{
  console.log("er",er)
}).catch((err)=>{
  console.log("catch",err)
})

当出现这种情况的时候，错误只会出现在er处，不会出现在catch处

下来科普下链式调取业务场景以及写法

比如我们平常经常遇到的一种情况：

网站中需要先获取用户名，然后再根据用户名去获取用户信息。这里获取用户名getUserName()和获取用户信息getUser()都是调用接口的异步请求。在获取用户信息之前，需要先获得用户名。也就是说getUser依赖于getUserName的状态。

function getUserName(username) {
  let data = username;
  return new Promise((resolve, reject) => {
    setTimeout(resolve(data), 4000);
  })
}

function getUser(username) {
  console.log(username);//man
  let data = {
    id: 1,
    username: username,
    gender: 'male'
  }
  return new Promise((resolve, reject) => {
    if (username) {
      setTimeout(resolve(data), 2000);
    } else {
      reject('err');
    }
  })
}
getUserName('man').then(username => {
  console.log(username);//man
  return getUser(username);
})
  .then(user => {
  console.log(user);//{id: 1, username: "man", gender: "male"}
})
  .catch(err => {
  console.log(err);
})

eg2:vue中实践
点击按钮事件getFaceResult()先提交getList()请求获取地域然后取回值传到
geiMoney()里面获取到值的链式结果，//注释的为以前内嵌的老写法不是链式

import { meny1,meny2 } from "../../mock/index.js";
当前页面
getFaceResult() {
  this.getList().then((res)=>{
    return this.geiMoney(res)
    // this.geiMoney(res).then((rese)=>{
    //   console.log(rese)
    // });
  }).then((rese)=>{
    console.log(rese)//打印的为money的值
  });
},
  geiMoney(){
    return this.$post('money.json')
  },
    getList(){
      return this.$post('area.json')
    }

mock.js

const Mock = require('mockjs');
var data = [
    {name:'奔1驰',id:'1',ctime:new Date},
    {name:'宝马',id:'2',ctime:new Date},
    ];
var meny = Mock.mock('www.bai.com/index.json','post',data)

var data1 = [
    {id:'1',pro:'深圳',area:'广州'}
]
var meny1 = Mock.mock('www.bai.com/area.json','post',data1)

var data2 = [
    {id:'1',money:'50'}
]
var meny2 = Mock.mock('www.bai.com/money.json','post',data2)
export default {meny,meny1,meny2};

重点

async/await改进上面的then链式调动

async getFaceResult() {
  try {
    let area = await this.getList();
    console.log(area[0].pro);
    if(area[0].pro == '深圳'){
      let money = await this.geiMoney(area.id)
      console.log(money);
    }

  } catch (error) {
    console.log(error)
  }
  geiMoney(){
    return this.$post('money.json')
  },
    getList(){
      return this.$post('area.json')
    }

总结:getFaceResult外使用async，声明异步;let area = await this.getList();这一步的时候如果只是let area = this.getList();的话，那么area是一个promise对象;加了个await之后，直接变为同步，这样最大的优点不仅在于可以把promise异步写法变同步，最重要的为可以明确的处理每一步异步请求的错误值的处理