返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6中async函数与await表达式的基本用法举例
  • 307
分享到

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

2024-04-02 19:04:59 307人浏览 安东尼
摘要

目录一、async 函数二、await表达式三、async await ajax 基础使用补充:async await ajax使用总结一、async 函数 概念:   a

一、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();

总结

到此这篇关于ES6中async函数与await表达式的基本用法的文章就介绍到这了,更多相关ES6 async函数与await表达式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: ES6中async函数与await表达式的基本用法举例

本文链接: https://lsjlt.com/news/165372.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • ES6中async函数与await表达式的基本用法举例
    目录一、async 函数二、await表达式三、async await ajax 基础使用补充:async await ajax使用总结一、async 函数 概念:   a...
    99+
    2024-04-02
  • JS函数表达式的基本概念
    本篇内容主要讲解“JS函数表达式的基本概念”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS函数表达式的基本概念”吧!函数表达式的基本概念name属性和函数提升...
    99+
    2024-04-02
  • vue中异步函数async和await的用法说明
    目录异步函数async和await用法async/await为什么叫异步外异内同异步函数async和await用法 先说一下async的用法,它作为一个关键字放到函数前面,用于表示函...
    99+
    2024-04-02
  • VUE中$refs的基本用法举例
    目录ref 有三种用法:第一种用法举例应注意的坑:vue---$refs的用法【详解】ref 有三种用法:  1、ref 加在普通的元素上,用this.$refs.(ref值) 获取...
    99+
    2022-12-19
    VUE中$refs用法 VUE中$refs
  • JS中let的基本用法举例
    目录JS中let用法基本用法补充:var和let的区别总结JS中let用法 基本用法 Let命令用来声明变量。它的用法类似于var,但是所声明的变量。只在let命令所在的代码块内有效...
    99+
    2023-01-05
    js中let的用法 let的用法及例句 关于let的用法
  • Python正则表达式的基本用法
    本篇内容介绍了“Python正则表达式的基本用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!正则表达式中特殊的符号:“.” 表任意字符“^...
    99+
    2023-06-17
  • Java中lambda表达式的基本运用
    目录一、实现接口二、数字排序三、字符串排序方法四、对象排序总结一、实现接口 调用一个接口中的方法,传统方法:接口类A: package lombda; public interf...
    99+
    2024-04-02
  • Python中eval函数的表达式作用示例
    目录eval 是干嘛的?语法格式最简单的表达式栗子带上 globals带上 locals字符串转字典带上 globals带上 locals内置函数栗子报错的栗子eval 是干嘛的? ...
    99+
    2024-04-02
  • Java8中Lambda表达式与函数式接口的示例分析
    这篇文章将为大家详细讲解有关Java8中Lambda表达式与函数式接口的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Java8被称作Java史上变化最大的一个版本。其中包含很多重要的新特性,最核...
    99+
    2023-05-30
    java lambda
  • Java正则表达式的基本用法和实例大全
    目录一、概述:二、单个符号三、快捷符号四、常用的正则表达式五、Java 中正则表达式的应用1、判断功能2、分割功能3、替换功能六、常用正则表达式七、实例总结一、概述: 用来描述或者匹...
    99+
    2024-04-02
  • JavaScript 函数表达式与函数声明的用法及区别
    目录前言什么是函数声明?函数声明的好处什么是函数表达式?函数表达式的好处函数表达式和函数声明之间的区别函数表达式中的作用域如何在表达式和声明之间进行选择何时选择函数声明与函数表达式在...
    99+
    2024-04-02
  • MySQL正则表达式regexp_replace函数的用法实例
    目录用法参数用法总结注:此函数为 MySQL8.0 版本新增,低于8.0版本没有此函数。 regexp_replace(expr, pat, repl[, pos[, oc...
    99+
    2024-04-02
  • JavaScript中函数表达式的示例分析
    这篇文章将为大家详细讲解有关JavaScript中函数表达式的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。JavaScript函数表达式一、序 &nb...
    99+
    2024-04-02
  • C++中Lambda表达式的语法与实例
    目录概述 语法分析 捕获列表 关键字声明 mutableexception示例 捕获列表按值传递捕获列表按引用传递总结概述 C++ 11 中的 Lambda 表达式用于定义并创建匿...
    99+
    2024-04-02
  • JAVA中Lambda表达式与函数式接口怎么用
    这篇文章主要为大家展示了“JAVA中Lambda表达式与函数式接口怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JAVA中Lambda表达式与函数式接口怎么用”这篇文章吧。Lambda表达...
    99+
    2023-06-29
  • 在Java中使用基本的正则表达式
    一、正则表达式简介 正则表达式是使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。爬虫中解析html可以使用正则来方便的提取信息 二、正则表达式匹配规则 ...
    99+
    2024-04-02
  • Java8中函数式接口与Lambda表达式的特性
    今天就跟大家聊聊有关Java8中函数式接口与Lambda表达式的特性,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。什么是Lambda表达式,java8为什么使用Lambda表达式?“...
    99+
    2023-05-31
    java8 函数式接口 lambda
  • Java正则表达式的基本用法是什么
    Java正则表达式是一种强大的字符串匹配工具,用于匹配和操作字符串的模式。它可以用于搜索、替换、验证和提取字符串中的特定模式。Jav...
    99+
    2023-08-12
    Java
  • Java正则表达式的基本用法有哪些
    Java正则表达式的基本用法有以下几种:1. 匹配:使用`matches()`方法来判断一个字符串是否与正则表达式匹配。例如:`St...
    99+
    2023-08-12
    Java
  • C++ 函数中 lambda 表达式的使用案例有哪些?
    c++++函数中的lambda表达式用例:回调函数:传递给其他函数或对象作为回调函数。仿函数:提供自定义比较器或谓词。事件处理:响应事件的回调函数。代码简化:消除对命名函数的需要。匿名函...
    99+
    2024-04-25
    c++ lambda
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作