如何使用ES6的新特性async await进行异步处理
时间:2022-07-26
本文章向大家介绍如何使用ES6的新特性async await进行异步处理,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何使用ES6的新特性async await进行异步处理
首先我们先举个例子: 先写上json文件: code.json:
{
"code":0,
"msg":"成功"
}
person.json:
{
"code":0,
"list":[
{
"id":1,
"name":"唐僧"
},
{
"id":2,
"name":"孙悟空"
},
{
"id":3,
"name":"猪八戒"
},
{
"id":4,
"name":"沙僧"
}
]
}
比如我们有两个请求,如下,这里用的axios:
function getCode(){
return axios.get('json/code.json');
}
function getlist(params){
return axios.get('json/person.json',{params})
}
我们第二个请求获取列表的时候需要使用第一个请求得到的code值,只有code值为0时,才能请求,而且当做参数传进去,那么我们看一下常规的做法吧
function getFinal(){
console.log("我是getFinal函数")
getCode().then(function(res){
if(res.data.code == 0){
console.log(res.data.code);
var params = {
code:res.data.code
}
getlist(params).then(function(res){
if(res.data.code == 0){
console.log(res.data.list);
}
})
}
})
}
getFinal();
看结果
虽然结果出来了,可是这种写法真的挺难受的,下面来一个async await的写法
async function getResult(){
console.log("我是getResult函数")
let code = await getCode();
console.log(code.data.code);
if(code.data.code == 0){
var params = {
code:code.data.code
}
let list = await getlist(params);
console.log(list.data.list);
}
}
getResult();
下面看结果
当然还剩最后一点,处理异常,可以加上try catch
async function getResult(){
console.log("我是getResult函数")
try{
let code = await getCode();
console.log(code.data.code);
if(code.data.code == 0){
var params = {
code:code.data.code
}
let list = await getlist(params);
console.log(list.data.list);
}
}catch(err){
console.log(err);
}
}
getResult();
如果对于异常没有特殊处理,可以不加try catch,因为打印出来的错误跟vue自己报的错误是一样的,而且还是黑的字体,不如醒目的红色来的痛快啊!当然如果要对错误进行特殊处理,那么就加上吧
代码风格是不是简便了许多,而且异步代码变成了同步代码,下面我稍微讲一下后者写法的代码执行顺序
首先在 function 前面加 async 用来说明这个函数是一个异步函数,当然,async是要和await配合使用的,第一个请求
let code = await getCode();
await
意思是等一下,等着getCode()这个函数执行完毕,得到值后再赋值给code,然后再用code的值进行下一步操作
- 机器学习(六)Sigmoid函数和Softmax函数1 Sigmoid函数2 Softmax函数
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件3(状态管理之Flux的使用⑤异步操作)
- 使用yo-get下载视频网站视频或其
- React多页面应用3(webpack4 多页面实现)
- 洛谷P2345 奶牛集会
- React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)
- React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)
- 洛谷P2345 奶牛集会
- P2880 [USACO07JAN]平衡的阵容Balanced Lineup
- Python黑客编程3网络数据监听和过滤
- React第三方组件6(状态管理之Mobx的使用⑤异步操作)
- 机器学习(五)使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数?前向传播,反向传播和训练次数(epochs)多层感知器全批量梯度下降
- 洛谷P2251 质量检测
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Executors.newSingleThreadScheduledExecutor();线程池中放入多个线程问题
- SqlServer批量删除表
- java 获取一天内crontab任务执行的时间点
- Python自学成才之路 魔术方法之一元,二元运算符
- Python自学成才之路 魔术方法之打印对象实例
- Python自学成才之路 装饰器必用的wraps注解
- Python自学成才之路 使用函数作为装饰器
- Python自学成才之路 装饰器编程之初试装饰器
- Python自学成才之路 元类中的__new__和__init__方法
- Centreon+Nagios实战第七篇——安装NRPE
- Python自学成才之路 详解类的三个重要方法__new__,__init__,__call__
- Centreon+Nagios实战第五篇——监控端安装Centreon
- Centreon+Nagios实战第四篇——监控端安装NDOUtils
- python自学成才之路 类属性和实例属性,__slots__方法
- 算法初步 基本概念 最大子数组和