vue中用 async/await 来处理异步操作

2024-08-01 08:55:12

昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，也是需要学习一下了。

先说一下async的用法，它作为一个关键字放到函数前面，

async function timeout() {
　　return 'hello world';
}

只有一个作用, 它的调用会返回一个promise 对象。调用一下看看就知道了，怎么调用？async 函数也是函数，所以它的调用和普通函数的调用没有什么区别，直接加括号调用就可以了，为了看结果，console.log 一下

async function timeout() {
  return 'hello world'
}
console.log(timeout());

看一下控制台

async函数(timeout)的调用，确实返回promise 对象，并且Promise 还有status和value，如果async 函数中有返回值 ,当调用该函数时，内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回, 但如果timeout 函数内部抛出错误呢？

async function timeout() {
  throw new Error('rejected');
}
console.log(timeout());

就会调用Promise.reject() 返回一个promise 对象，

那么要想获取到async 函数的执行结果，就要调用promise的then 或catch 来给它注册回调函数，

async function timeout() {
  return 'hello world'
}
timeout().then(result => {
  console.log(result);
})

如果async 函数执行完，返回的promise 没有注册回调函数，比如函数内部做了一次for 循环，你会发现函数的调用，就是执行了函数体，和普通函数没有区别，唯一的区别就是函数执行完会返回一个promise 对象。

async function timeout() {
  for (let index = 0; index < 3; index++) {
    console.log('async '+ index);
  }
}
console.log(timeout());
console.log('outer')

async 关键字差不多了，最重要的就是async函数的执行会返回一个promise 对象，并且把内部的值进行promise的封装。如果promise对象通过then或catch方法又注册了回调函数，async函数执行完以后，注册的回调函数就会放到异步队列中，等待执行。如果只是async, 和promise 差不多，但有了await就不一样了， await 关键字只能放到async 函数里面，await是等待的意思，那么它等待什么呢，它后面跟着什么呢？其实它后面可以放任何表达式，不过我们更多的是放一个返回promise 对象的表达式，它等待的是promise 对象的执行完毕，并返回结果

现在写一个函数，让它返回promise 对象，该函数的作用是2s 之后让数值乘以2

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(2 * num)
    }, 2000);
  } )
}

现在再写一个async 函数，从而可以使用await 关键字， await 后面放置的就是返回promise对象的一个表达式，所以它后面可以写上 doubleAfter2seconds 函数的调用

async function testResult() {
  let result = await doubleAfter2seconds(30);
  console.log(result);
}

现在调用testResult 函数

testResult(); 　　

打开控制台，2s 之后，输出了60.

现在看看代码的执行过程，调用testResult 函数，它里面遇到了await, await 表示等待，代码就暂停到这里，不再向下执行了，它等待后面的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。具体到我们的代码, 遇到await 之后，代码就暂停执行了，等待doubleAfter2seconds(30) 执行完毕，doubleAfter2seconds(30) 返回的promise 开始执行，2秒之后，promise resolve 了，并返回了值为60，这时await 才拿到返回值60，然后赋值给result，暂停结束，代码继续执行，执行 console.log语句。

就这一个函数，我们可能看不出async/await 的作用，如果我们要计算3个数的值，然后把得到的值进行输出呢？

async function testResult() {
  let first = await doubleAfter2seconds(30);
  let second = await doubleAfter2seconds(50);
  let third = await doubleAfter2seconds(30);
  console.log(first + second + third);
}

6秒后，控制台输出220, 我们可以看到，写异步代码就像写同步代码一样了，再也没有回调地域了。

这里强调一下等待，当js引擎在等待promise resolve 的时候，它并没有真正的暂停工作，它可以处理其它的一些事情，如果我们在testResult函数的调用后面，console.log 一下，你发现后面console.log的代码先执行。

async function testResult() {
  let first = await doubleAfter2seconds(30);
  let second = await doubleAfter2seconds(50);
  let third = await doubleAfter2seconds(30);
  console.log(first + second + third);
}

testResult();
console.log('先执行');

再写一个真实的例子，我原来做过一个小功能，话费充值，当用户输入电话号码后，先查找这个电话号码所在的省和市，然后再根据省和市，找到可能充值的面值，进行展示。

为了模拟一下后端接口，我们新建一个node 项目。新建一个文件夹 async, 然后npm init -y 新建package.json文件，npm install express --save 安装后端依赖，再新建server.js 文件作为服务端代码， public文件夹作为静态文件的放置位置，在public 文件夹里面放index.html 文件，整个目录如下

server.js 文件如下，建立最简单的web 服务器

const express = require('express');
const app = express();// express.static 提供静态文件，就是html, css, js 文件
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('server start');
})

再写index.html 文件，我在这里用了vue构建页面，用axios 发送ajax请求，为了简单，用cdn 引入它们。 html部分很简单，一个输入框，让用户输入手机号，一个充值金额的展示区域， js部分，按照vue 的要求搭建了模版

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Async/await</title>
  <!-- CDN 引入vue 和 axios -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">

    <!-- 输入框区域 -->
    <div style="height:50px">
      <input type="text" placeholder="请输入电话号码" v-model="phoneNum">
      <button @click="getFaceResult">确定</button>
    </div>

    <!-- 充值面值 显示区域 -->
    <div>
      充值面值：
      <span v-for="item in faceList" :key='item'>
        {{item}}
      </span>
    </div>
  </div>

  <!-- js 代码区域 -->
  <script>
    new Vue({
      el: '#app',
      data: {
        phoneNum: '12345',
        faceList: ["20元", "30元", "50元"]
      },
      methods: {
        getFaceResult() {

        }
      }
    })
  </script>
</body>
</html>

为了得到用户输入的手机号，给input 输入框添加v-model指令，绑定phoneNum变量。展示区域则是绑定到faceList 数组，v-for 指令进行展示，这时命令行nodemon server 启动服务器，如果你没有安装nodemon，可以npm install -g nodemon 安装它。启动成功后，在浏览器中输入 http://localhost:3000, 可以看到页面如下，展示正确

现在我们来动态获取充值面值。当点击确定按钮时，我们首先要根据手机号得到省和市，所以写一个方法来发送请求获取省和市，方法命名为getLocation, 接受一个参数phoneNum , 后台接口名为phoneLocation，当获取到城市位置以后，我们再发送请求获取充值面值，所以还要再写一个方法getFaceList, 它接受两个参数, province 和city, 后台接口为faceList，在methods 下面添加这两个方法getLocation, getFaceList

methods: {
      //获取到城市信息
      getLocation(phoneNum) {
        return axios.post('phoneLocation', {
          phoneNum
        })
      },
      // 获取面值
      getFaceList(province, city) {
        return axios.post('/faceList', {
          province,
          city
        })
      },
      // 点击确定按钮时，获取面值列表
      getFaceResult () {

      }
    }

现在再把两个后台接口写好，为了演示，写的非常简单，没有进行任何的验证，只是返回前端所需要的数据。Express 写这种简单的接口还是非常方便的，在app.use 和app.listen 之间添加如下代码

// 电话号码返回省和市，为了模拟延迟，使用了setTimeout
app.post('/phoneLocation', (req, res) => {
  setTimeout(() => {
    res.json({
      success: true,
      obj: {
        province: '广东',
        city: '深圳'
      }
    })
  }, 1000);
})

// 返回面值列表
app.post('/faceList', (req, res) => {
  setTimeout(() => {
    res.json(
      {
        success: true,
        obj:['20元', '30元', '50元']
      }

    )
  }, 1000);
})

最后是前端页面中的click 事件的getFaceResult, 由于axios 返回的是promise 对象，我们使用then 的链式写法，先调用getLocation方法，在其then方法中获取省和市，然后再在里面调用getFaceList，再在getFaceList 的then方法获取面值列表，

     // 点击确定按钮时，获取面值列表
      getFaceResult () {
        this.getLocation(this.phoneNum)
          .then(res => {
            if (res.status === 200 && res.data.success) {
              let province = res.data.obj.province;
              let city = res.data.obj.city;

              this.getFaceList(province, city)
                .then(res => {
                  if(res.status === 200 && res.data.success) {
                    this.faceList = res.data.obj
                  }
                })
            }
          })
          .catch(err => {
            console.log(err)
          })
      }

现在点击确定按钮，可以看到页面中输出了从后台返回的面值列表。这时你看到了then 的链式写法，有一点回调地域的感觉。现在我们在有async/ await 来改造一下。

首先把 getFaceResult 转化成一个async 函数，就是在其前面加async，因为它的调用方法和普通函数的调用方法是一致，所以没有什么问题。然后就把 getLocation 和

getFaceList 放到await 后面，等待执行， getFaceResult 函数修改如下

      // 点击确定按钮时，获取面值列表
      async getFaceResult () {
        let location = await this.getLocation(this.phoneNum);
        if (location.data.success) {
          let province = location.data.obj.province;
          let city = location.data.obj.city;
          let result = await this.getFaceList(province, city);
          if (result.data.success) {
            this.faceList = result.data.obj;
          }
        }
      }

现在代码的书写方式，就像写同步代码一样，没有回调的感觉，非常舒服。

现在就还差一点需要说明，那就是怎么处理异常，如果请求发生异常，怎么处理？它用的是try/catch 来捕获异常，把await 放到 try 中进行执行，如有异常，就使用catch 进行处理。

      async getFaceResult () {
        try {
          let location = await this.getLocation(this.phoneNum);
          if (location.data.success) {
            let province = location.data.obj.province;
            let city = location.data.obj.city;
            let result = await this.getFaceList(province, city);
            if (result.data.success) {
              this.faceList = result.data.obj;
            }
          }
        } catch(err) {
          console.log(err);
        }
      }

现在把服务器停掉，可以看到控制台中输出net Erorr，整个程序正常运行。

以上这篇vue中用 async/await 来处理异步操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

详解vue中async-await的使用误区

曾经见过为了让钩子函数的异步代码可以同步执行,而对钩子函数使用async/await,就好像下面的代码: // exp-01 export default { async created() { const timeKey = 'cost'; console.time(timeKey); console.log('start created'); this.list = await this.getList(); console.log(this.list); console.log('end
vue如何使用async、await实现同步请求

这篇文章主要介绍了vue如何使用async.await实现同步请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下以下是vue method的demo: loadTableData : async function() { var reses = await $.ajax({ type:'post', url:'/linewell/system/user/queryPageList.do'/*, }); console.log("reses&q
详解vue中多个有顺序要求的异步操作处理

最近项目业务上有个需求,用户可以批量下订单,但每个订单都有一个保价费,手续费需要根据订单的价值由后台的模型算出来,然后下单的时候每个订单都需要带上这个保价费,所以其实在批量下单前,每个订单都需要执行一次后台接口,不要问我为什么不将订单都传给后台,让后台去算,现在的业务方案是要前端每一个订单都请求一次接口去算出来,然后再批量去下单. 那就写吧,其实就是调用批量下单的接口前,要先每个顶你单调一次查保价费的接口,想着很简单,将保存多选数据的数组遍历,每次执行一次查保价费的接口就好,然后在遍历完后再调
async/await让异步操作同步执行的方法详解

一.前言我们经常会遇到这样的麻烦事,多个函数按顺序执行,返回结果却不是我们预期的顺序,原因一般是由于异步操作引起的,所以呢,我们需要一种解决方案来处理这种问题,从而使得异步操作按照同步的方式来执行,这样我们就可以控制异步操作输出结果的顺序了二.异步操作会带来什么问题异步操作可能会许多的问题,下面是常见的两种 1.函数执行的结果并不是按照顺序返回 function fn1(){ console.log(111) setTimeout(function(){ console.log('wait
vue中用 async/await 来处理异步操作

昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了. 先说一下async的用法,它作为一个关键字放到函数前面, async function timeout() { return 'hello world'; } 只有一个作用, 它的调用会返回一个promise 对象.调用一下看看就知道了,怎么调用?async 函数也是函数,所以它的调用和普通函数的调用没有什么区别,直接加括号调用就可
async/await与promise（nodejs中的异步操作问题）

举例写文章详情页面的时候的一个场景:首先更改文章详情中的 PV,然后读取文章详情,然后根据文章详情中文章 Id 查阅该文章评论和该文章作者信息.获取全部数据之后渲染文章详情页.数据库操作都是异步的,最直接想到的办法就是一层一层的回调函数,问题出来了:十分不雅观,要是层再多一点还会有更多麻烦.怎么解决?业内为了处理异步操作问题也是拼了,什么async,q,bluebird,co,处理方式不同,各有千秋,感兴趣可以了解一下,但是惊喜的发现nodejs 7.6已经默认支持ES7中的 async/awa
JS中如何优雅的使用async await详解

目录 jQuery的$.ajax Webpack时代的开始深入了解Promise 消灭嵌套 await-to-js 总结 jQuery的$.ajax 在开始之前我们先来聊聊我的js异步之路.在我还在学校的时候,那时候还是 jQuery 的天下,我直接接触到并且经常使用的异步操作就是网络请求,一手 $.ajax走天下,伴我过了大二到毕业后差不多大半年的时间. $.ajax( "/xxx" ) .done(function() { // success !!! do something.
JavaScript中async,await的使用和方法

JS中 async函数和await 关键字 function hellworld() { return "您好!美好世界!"; } console.log(hellworld()); // 您好!美好世界! async function asyHellworld() { return "您好!美好世界!"; } console.log(asyHellworld()); // Promise { '您好!美好世界!' } 普通函数 hellworld 将简单地返回字符
axios中如何进行同步请求(async+await)

目录 axios进行同步请求(async+await) 介绍代码示例 axios使用async/await对promise进行优化解释 axios进行同步请求(async+await) 介绍 Axios 是一个基于 promise 的 HTTP 库,它支持 PromiseAPI. 像这样: axios.post('getsomething').then( res => { // 进行一些操作 } ) 而 async/await 是一种建立在Promise之上的
详解C#中 Thread，Task，Async/Await，IAsyncResult的那些事儿

说起异步,Thread,Task,async/await,IAsyncResult 这些东西肯定是绕不开的,今天就来依次聊聊他们 1.线程(Thread) 多线程的意义在于一个应用程序中,有多个执行部分可以同时执行:对于比较耗时的操作(例如io,数据库操作),或者等待响应(如WCF通信)的操作,可以单独开启后台线程来执行,这样主线程就不会阻塞,可以继续往下执行:等到后台线程执行完毕,再通知主线程,然后做出对应操作! 在C#中开启新线程比较简单 static void Main(string[]
详解ES6之async+await 同步/异步方案

异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [
深入理解ES7的async/await的用法

在最开始学习ES6的Promise时,曾写过一篇博文 <promise和co搭配生成器函数方式解决js代码异步流程的比较> ,文章中对比了使用Promise和co模块搭配生成器函数解决js异步的异同. 在文章末尾,提到了ES7的async和await,只是当时只是简单的提了一下,并未做深入探讨. 在前两个月发布的Nodejs V7中,已添加了对async和await的支持,今天就来对这个东东做一下深入的探究.以更加优雅的方法写异步代码. async/await是什么 async/await可以
Js中async/await的执行顺序详解

前言虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

vue中用 async/await 来处理异步操作

相关推荐

随机推荐