js 新语法 async await的使用

随着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)
          }
    })
}

  

  

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

时间: 2024-10-13 14:13:19

js 新语法 async await的使用的相关文章

js异步回调Async/Await与Promise区别 新学习使用Async/Await

Promise,我们了解到promise是ES6为解决异步回调而生,避免出现这种回调地狱,那么为何又需要Async/Await呢?你是不是和我一样对Async/Await感兴趣以及想知道如何使用,下面一起来看看这篇文章:Async/Await替代Promise的6个理由. 什么是Async/Await? async/await是写异步代码的新方式,以前的方法有回调函数和Promise. async/await是基于Promise实现的,它不能用于普通的回调函数. async/await与Prom

JS学习- ES6 async await使用

async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起来很冗余,这时我们可以用async函数. 比如我们有两个请求,如下,这里用的axios: function getCode(){ return axios.get('json/code.json'); } function getlist(params){ return axios.get('jso

js callback promise async await 几种异步函数处理方式

***callback  这个是最常用的也是最简单的 ,比如在ajax网络请求中,返回请求完成返回的数据 回调函数就是把一个函数当成另一个函数的参数,可以传递函数内的局部变量,也可以异步完成一些操作,在函数的实现里调用回调函数,在函数的调用里实现回调函数 // 回調函數的方式 閉包 可以獲取函數內部的局部變量 function testCallback(callback) { let a = 1; let b = 2; if (a < b) { callback && callbac

JS中的async/await的用法和理解

1.首先需要理解async 和 await的基本含义 async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数 // 0. async基础用法测试 async function fun0() { console.log(1) return 1 } fun0().then( x => { console.log(x) }) // 输出结果 1, 1, async funct

优雅地 `async/await`

async/await 虽然取代了回调,使用类似同步的代码组织方式让代码更加简洁美观,但错误处理时需要加 try/catch. 比如下面这样,一个简单的 Node.js 中使用 async/await 的场景: const fetch = require("node-fetch"); async function getData() { const url = "https://api.github.com/users/wayou"; try { const res

wepack打包时出错不压缩代码及使用es7(async await)新语法问题

1.打包时出错且不压缩代码是因为没有正确的转换语法 npm install babel-core babel-preset-env babel-loader --save-dev 2.如果使用了async await等es7新语法还要安装 npm install babel-plugin-transform-runtime --save-dev 3.webpack.config.js中配置 module:{ rules:[ { test:/(\.jsx|.js)$/, use:{ loader:

callback vs async.js vs promise vs async / await

需求: A.依次读取 A|B|C 三个文件,如果有失败,则立即终止. B.同时读取 A|B|C 三个文件,如果有失败,则立即终止. 一.callback 需求A: let read = function (code) { if (code) { return true; } else { return false; } } let readFileA = function (callback) { if (read(1)) { return callback(null, "111");

现代JS中的流程控制:详解Callbacks 、Promises 、Async/Await

JavaScript经常声称是_异步_.那是什么意思?它如何影响发展?近年来这种方法有何变化? 请思考以下代码: result1 = doSomething1(); result2 = doSomething2(result1); 大多数语言都处理每一行同步.第一行运行并返回结果.第二行在第一行完成后运行无论需要多长时间. 单线程处理 JavaScript在单个处理线程上运行.在浏览器选项卡中执行时,其他所有内容都会停止,因为在并行线程上不会发生对页面DOM的更改;将一个线程重定向到另一个URL

ES6 async/await语法

Async/await的主要益处是可以避免回调地狱(callback hell)问题 Chromium JavaScript引擎 从v5.5开始支持async/await功能,Chromium JavaScript引擎版本号的查看方法是:在浏览器地址栏输入 chrome://version,查询出来的信息如下图所示: 这意味着async/await不再是实验性功能,使用它时无需指定--harmony参数,此参数用来开启那些几乎已完成但被V8团队认为还不稳定的功能.不同的node版本使用不同的V8