您现在的位置是：网站首页> 编程资料编程资料

ES6中async函数与await表达式的基本用法举例_javascript技巧_

2023-05-24 390人已围观

简介 ES6中async函数与await表达式的基本用法举例_javascript技巧_

一、async 函数

概念：

async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve（成功值）的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。

举例：

async function demo(){ // 1:当返回值不是promise对象 当调用函数的时候就是已成功的值 // return "succ"; // 2:当返回的是promise对象 那么函数(promise对象)的结果与返回的promise状态一致 return new Promise((resolve,reject)=>{ //Promise 内容请参考上期作品，关注专栏。 let flag = true; if(flag){ resolve("succ"); }else{ reject("error"); } }) } const MyPromise = demo(); MyPromise.then((resolve)=>{ console.log(resolve); },(reject)=>{ console.log(reject); })

二、await表达式

它也是一个修饰符，await 关键字只能放在 async 函数内部， await关键字的作用就是获取 Promise中返回的内容，获取的是Promise函数中resolve。

1.await必须放在async函数中

2.await右侧的表达式一般为promise对象

3.await可以返回的是右侧promise成功的值

4.await右侧的promise如果失败了，就会抛出异常，需要通过try…catch捕获处理

举例：

// 1:await需要写在async函数的内部 // 2:await 修饰的Promise 返回的值就是resolve的值 // 3:后面的代码需要等待 await后的结果 async function demo(){ const a = await "a"; const b = await new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log("定时器执行了...."); resolve("b"); },3000); }); const c = await "c"; console.log(a,b,c); } demo();

举例：失败的代码 await 错误的代码需要用try catch捕获

async function demo(){ try{ const a = await new Promise((relsolve,reject)=>{ reject("数据不存在"); }) }catch(error){ console.log(error); } } demo();

三、async await ajax 基础使用

function mark (url){ return new Promise((resolve,reject)=>{ const ajax = new XMLHttpRequest(); ajax.open("GET",url) ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState==4){ if(ajax.status==200){ resolve(JSON.parse(ajax.response)); } } } }) } async function demo(){ const res = await mark("http://127.0.0.1:5500/test.json")

补充：async await ajax使用

首先要创建对象，用get的方法请求后面传入的地址，再发送请求，通过判断出输出有无数据。

function sendajax(url){ return new Promise((resolve,reject)=>{ const http = new XMLHttpRequest();//创建对象 http.open("GET",url);//用get方法请求地址 http.send();//发送请求 http.onreadystatechange = function(){ if(http.readyState==4){ if(http.status==200){ resolve(JSON.parse(http.response)); } } } }) } async function demo(){ const res = await sendajax("http://127.0.0.1:8848/web2209/ES6/test.json"); if(res.code==200){ console.log("有数据"); }else{ console.log("无数据"); } } demo();