分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

js 新语法 async await的使用

发布时间:2023-09-06 02:25责任编辑:彭小芳关键词:js

随着es6的更新与普及新的语法又在es7、es8中推广与更进一步;

es5的同步处理请求的方式:

server.getUser().then((res) => {if (res.status == ‘success‘) {console.log(‘请求成功‘) ???getAddress(res.model.id) //成功后再继续发下一个请求} else { ?????????????console.log(‘请求失败‘) ???????}})function getAddress(userid){ ????server.getAddress({id:userid}).then((res) => {if (res.status == ‘success‘) {console.log(‘请求成功‘) ???//处理逻辑} else { ?????????????console.log(‘请求失败‘) ???????} ?})}

  点评:此处至少有两个问题

              1.代码没有加异常处理,如果接口返回失败或代码质量报错,会造成代码阻塞卡死应用;

              2.嵌套发请求太落后已不适应当前前端的发展,造成可读性差;

     修改一下用es6 的async awiat

  

try{ ???let user =awiat getUser(); ???if(user){ ????????let address = awiat getAddress(user.id) ????????//处理逻辑 ???}}catch(e){ ???console.error(e)}//...省略代码 ??上面两个方法报错不会阻塞后面代码的执行//封装两个请求方法async function getUser(){ ????let data = ‘‘; ????return new Promise(async (resolve, reject) => { ?????????try{ //加异常处理 ???????????????data =await server.getUser(); ???????????????if(data.status==‘success‘){ ???????????????????return resolve(data) ???????????????}else{ ??????????????????return resolve(‘‘) ???????????????} ?????????}catch(e){ ??????????????reject(e) ?????????} ???})} ???async function getAddress(id){ ????let data = ‘‘; ????return new Promise(async (resolve, reject) => { ?????????try{ //加异常处理 ???????????????data =await server.getAddress({id:id}); ???????????????if(data.status==‘success‘){ ???????????????????return resolve(data) ???????????????}else{ ??????????????????return resolve(‘‘) ???????????????} ?????????}catch(e){ ??????????????reject(e) ?????????} ???})} 

  

  

js 新语法 async await的使用

原文地址:https://www.cnblogs.com/suzhen-2012/p/10105557.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved