本文小编为大家详细介绍“ES6中async函数与await表达式怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“ES6中async函数与await表达式怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
概念:
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 关键字 只能放在 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();
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")
首先要创建对象,用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();
读到这里,这篇“ES6中async函数与await表达式怎么使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。