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

目录
  • 一、async 函数
  • 二、await表达式
  • 三、async await ajax 基础使用
  • 补充：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")

补充：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表达式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了.虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段. 直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据 老朋友 Ajax 传统的写法,无需解释 // 获取产品数据 ajax('products.json', (products) => { console.log('AJAX/products >>>', JSON

  • 关于async和await的一些误区实例详解

    微软官方的MSDN上说async和await是"异步",但是不少人(包括笔者自己)都有一些误区需要澄清:为什么await语句之后没有执行?不是异步吗? 先举一个示例代码如下: public partial class Form1 : Form { public async Task Processing() { await Task.Delay(5000); label1.Text = "Succuessful"; } public Form1() { Initia

  • 详解ES6之async+await 同步/异步方案

    异步编程一直是JavaScript 编程的重大事项.关于异步方案, ES6 先是出现了 基于状态管理的 Promise,然后出现了 Generator 函数 + co 函数,紧接着又出现了 ES7 的 async + await 方案. 本文力求以最简明的方式来疏通 async + await. 异步编程的几个场景 先从一个常见问题开始:一个for 循环中,如何异步的打印迭代顺序? 我们很容易想到用闭包,或者 ES6 规定的 let 块级作用域来回答这个问题. for (let val of [

  • Js中async/await的执行顺序详解

    前言 虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await(如果对async/await不熟悉可以先看下这篇文章)后拓展了一下,我理了一下await之后js的执行顺序,希望可以给别人解疑答惑,先简单介绍一下async/await. async/await 是一种编写异步代码的新方法.之前异步代码的方案是回调和 promise. async/await 是建立在 promise 的基础上

  • JS中async/await实现异步调用的方法

    async/await多个函数关联调用 async/await使得异步代码看起来像同步代码 async函数会隐式地返回一个promise,而promise的reosolve值就是函数return的值 Async/Await不需要写.then,不需要写匿名函数处理Promise的resolve值,也不需要定义多余的data变量,还避免了嵌套代码 async声明一个异步函数 await只能在async函数中使用,后面跟一个promise对象 所以在模拟异步调用函数时,函数体内返回promise as

  • 在JS循环中使用async/await的方法

    async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案.目前,async / await这个特性已经是stage 3的建议,可以看看TC39的进度,本篇文章将分享在JS循环中使用async/await的方法. 在开发maty.js时,遇到一个数组任务,数组项是内部异步执行的函数,期望是同步依次执行每项函数,每项函数执行完本身的异步任务后,继续下一项. 刚开始单纯使用map来循环执行,并且await每项函数.如下所示: starters.map(async (fn,

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

    目录 一.async 函数 二.await表达式 三.async await ajax 基础使用 补充:async await ajax使用 总结 一.async 函数 概念: async 是一个修饰符,async 定义的函数会默认的返回一个Promise对象resolve(成功值)的值,因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数. 举例: async function demo(){ // 1:当返回值不是promise对象 当调用函数的时候就是已成功的值

  • 深入理解js 中async 函数的含义和用法

    一.终极解决 异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题. 从最早的回调函数,到 Promise 对象,再到 Generator 函数,每次都有所改进,但又让人觉得不彻底.它们都有额外的复杂性,都需要理解抽象的底层运行机制. 异步I/O不就是读取一个文件吗,干嘛要搞得这么复杂?异步编程的最高境界,就是根本不用关心它是不是异步. async 函数就是隧道尽头的亮光,很多人认为它是异步操作的终极解决方案. 二.async 函数是什么? 一句话,

  • php中FTP函数ftp_connect、ftp_login与ftp_chmod用法

    本文实例讲述了php中FTP函数ftp_connect.ftp_login与ftp_chmod用法.分享给大家供大家参考.具体方法如下: ftp_connect() 函数建立一个新的 ftp 连接,若成功,则返回一个连接标识,否则返回 false. 语法:ftp_connect(host,port,timeout),实例代码如下: 复制代码 代码如下: $file='public_html/index.php';         //定义文件 $conn_id=ftp_connect($ftp_

  • pytorch 中pad函数toch.nn.functional.pad()的用法

    padding操作是给图像外围加像素点. 为了实际说明操作过程,这里我们使用一张实际的图片来做一下处理. 这张图片是大小是(256,256),使用pad来给它加上一个黑色的边框.具体代码如下: import torch.nn,functional as F import torch from PIL import Image im=Image.open("heibai.jpg",'r') X=torch.Tensor(np.asarray(im)) print("shape:

  • JS ES6中setTimeout函数的执行上下文示例

    本文介绍的是setTimeout函数,延迟执行函数里的执行上下文,分享给大家供大家参考学习,来看看详细的内容: (1)ES5中,setTimeout里面的函数的执行上下文为全局上下文,举例来说: function log(){ setTimeout(function(){console.log(this.id)},100) } var id=42 log.call({id:21}) //输出的结果为42 我们可以看到setTimeout,被延迟执行的函数,里面的this,指向的是全局作用域,也就

  • ES6中箭头函数的定义与调用方式详解

    本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 基本用法: ES6中允许使用"箭头"(=>)定义函数 var f = v => v; 上面代码相当于: var f = function( v ) { return v; } 根据箭头函数有参数和无参数来区分 1.无参数的箭头函数 var f = () => 5; 等同于 var f = function() { return 5}; 2.有参数的箭头函数 v

  • javascript ES6中箭头函数注意细节小结

    前言 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 但箭头函数带来了些许问题,下面来一起看看吧. 关于{} 第一个问题是关于箭头函数与{}. 箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2: const numbers = [1, 2, 3]; const result

  • js中async函数结合promise的小案例浅析

    js中async函数结合promise的小案例浅析

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

  • MySql 中聚合函数增加条件表达式的方法

    Mysql 与聚合函数在一起时候where条件和having条件的过滤时机 where 在聚合之前过滤 当一个查询包含了聚合函数及where条件,像这样的情况 select max(cid) from t where t.id<999 这时候会先进行过滤,然后再聚合.先过滤出ID<999的记录,再查找最大的cid返回. having 在聚合之后过滤 having在分组的时候会使用,对分组结果进行过滤,通常里面包含聚合函数. SELECT ip,MAX(id) FROM app GROUP BY

  • 详解Python中open()函数指定文件打开方式的用法

    文件打开方式 当我们用open()函数去打开文件的时候,有好几种打开的模式. 'r'->只读 'w'->只写,文件已存在则清空,不存在则创建. 'a'->追加,写到文件末尾 'b'->二进制模式,比如打开图像.音频.word文件. '+'->更新(可读可写) 这个带'+'号的有点难以理解,上代码感受下. with open('foo.txt', 'w+') as f: f.write('bar\n') f.seek(0) data = f.read() 可以看到,上面这段代码

随机推荐