zoukankan      html  css  js  c++  java
  • 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异步写法变同步,最重要的为可以明确的处理每一步异步请求的错误值的处理

  • 相关阅读:
    智能推荐算法演变及学习笔记(三):CTR预估模型综述
    从中国农业银行“雅典娜杯”数据挖掘大赛看金融行业数据分析与建模方法
    智能推荐算法演变及学习笔记(二):基于图模型的智能推荐(含知识图谱/图神经网络)
    (设计模式专题3)模板方法模式
    (设计模式专题2)策略模式
    (设计模式专题1)为什么要使用设计模式?
    关于macOS上常用操作命令(持续更新)
    记录下关于RabbitMQ常用知识点(持续更新)
    EMERGENCY! EUREKA MAY BE INCORRECTLY CLAIMING INSTANCES ARE UP WHEN THEY'RE NOT. RENEWALS ARE LESSER THAN THRESHOLD AND HENCE THE INSTANCES ARE NOT BEING EXPIRED JUST TO BE SAFE.
    SpringCloud教程二:Ribbon(Finchley版)
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/10997127.html
Copyright © 2011-2022 走看看