ES6中 async 函数、await表达式 的基本用法

简介: 学习Es6中async函数、await表达式的基本用法。

目录


一、async 函数


概念:  


举例:


二、await表达式


1.await必须放在async函数中


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


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


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


举例:


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


三、async await ajax 基础使用


一、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")
return new Promise((resolve,reject)=>{
    if(res.code==200){
        resolve("有数据")
     }else{
        reject("无数据")
            }
})
        }
demo().then(resolve=>console.log(resolve),reject=>console.log(reject))


相关文章
|
1月前
|
JSON 前端开发 API
es6 中await的用法
es6 中await的用法
38 0
|
7月前
|
JSON 前端开发 JavaScript
async/await语法
async/await语法
62 0
|
7月前
|
JavaScript 前端开发 开发者
7个Js async/await高级用法
7个Js async/await高级用法
139 0
|
前端开发
ES6学习(十)—async 函数
ES6学习(十)—async 函数
|
JSON 前端开发 JavaScript
async await异步,ejs基础使用,三目运算符
async await异步,ejs基础使用,三目运算符
|
JavaScript 前端开发
asyns和await用法?
asyns和await用法?
|
前端开发 JavaScript
从 async 和 await 函数返回值说原理
昨天在文章《JavaScript中的 async 和 await》中简单的介绍了其使用方法。那么 async 和 await 如何工作,如何正确的使用 async 和 await 。
408 0
|
前端开发
promise ,async/await的基础用法
promise ,async/await的基础用法
|
小程序 前端开发
小程序里使用es7的async await语法
小程序里使用es7的async await语法
126 0
|
消息中间件 前端开发 JavaScript
ES8 中的 async/await —— 异步函数
ES8 中的 async/await —— 异步函数
202 0

热门文章

最新文章