首页 > 编程语言 >JavaScript 的async、await功能

JavaScript 的async、await功能

时间:2023-02-08 09:13:49浏览次数:40  
标签:function resolve JavaScript Promise reject async await

async function

async function 说明

和C#中的使用类似。不过Task在Javascript中使用的是Promise对象。

async function 的返回值

async function testAsyncFunction()
{
    // 返回字符串
    // 函数返回一个成功的Promise,内部value为字符串值
    // return 'abc';

    // 直接返回
    // 函数返回一个成功的Promise,内部value为undefined
    // return;

    // 抛出错误
    // 函数返回一个失败的Promise,内部value为错误信息
    // throw new Error('Error');

    // 返回一个Promise对象
    // 如果时返回的成功的Promise对象,内部value就是对应值
    // 如果时返回的失败的Promise对象,内部value就是对应值
    return new Promise((resolve,reject)=>{
        //成功值
        resolve("成功值");
        //失败值
        //reject("失败值");
    });

    // 总结:只要 没有抛出错误 或 返回失败的Promise 就是返回成功的Promise
}

let test = testAsyncFunction();

test.then(resolve=>{
    console.log(resolve);
},reason => {
    console.log(reason);
});

await

说明

await后面跟Promise类型的实例。
await表达式的值为后面Promise类型的实例的返回值。
使用async、await配合Promise的方式,处理错误的方式使用try...catch...。

基本使用

//用于测试Promise对象
const panda = new Promise((resolve, reject)=>{
    //如果成功
    resolve('panda666');
    //如果出错
    reject('panda666');
});


//async function
async function main()
{
    try{
        //result的值为panda的返回值
        let result = await panda;
        console.log(result);
    }catch (e) //如果panda出错,进入异常处理
    {
        console.error(e);
    }
}

main();

实例

依次读取文件

import fs from  'fs';

let filePath1 = "C:/Users/admin/Downloads/test/file/t1.txt";
let filePath2 = "C:/Users/admin/Downloads/test/file/t2.txt";
let filePath3 = "C:/Users/admin/Downloads/test/file/t3.txt";

function readFile1()
{
    return new Promise((resolve, reject)=> {
        fs.readFile(filePath1,(error,data)=>{
            if(error)
            {
                reject(error);
            }

            resolve(data);
        });
    });
}

function readFile2()
{
    return new Promise((resolve, reject)=> {
        fs.readFile(filePath2,(error,data)=>{
            if(error)
            {
                reject(error);
            }

            resolve(data);
        });
    });
}

function readFile3()
{
    return new Promise((resolve, reject)=> {
        fs.readFile(filePath3,(error,data)=>{
            if(error)
            {
                reject(error);
            }

            resolve(data);
        });
    });
}

async function test()
{
    let r1 = await readFile1();
    let r2 = await readFile2();
    let r3 = await readFile3();

    console.log(r1.toString());
    console.log(r2.toString());
    console.log(r3.toString());
}



test()

发送ajax的get请求

function sendAjaxGet(url)
{
    return new Promise((resolve, reject)=>{
        try{
            let xMLHttpRequest = new XMLHttpRequest()

            xMLHttpRequest.open('get',url);

            xMLHttpRequest.send();

            xMLHttpRequest.onreadystatechange = function (e)
            {
                if(xMLHttpRequest.readyState === 4)
                {
                    if(xMLHttpRequest.status < 300 && xMLHttpRequest.status >= 200)
                    {
                        resolve(xMLHttpRequest.response);
                    }
                    else
                    {
                        reject(xMLHttpRequest.status);
                    }
                }
            }
        }
        catch (e)
        {
            reject(e.message);
        }
    })

}


async function main()
{
    try
    {
        let result = await sendAjaxGet('/index2.html');
        console.log(result);
    }
    catch (e)
    {
        console.log(e);
    }
}

main()

标签:function,resolve,JavaScript,Promise,reject,async,await
From: https://www.cnblogs.com/cqpanda/p/17084864.html

相关文章

  • javascript:DOM/BOM练习
    javascript:DOM/BOM练习    一、BOM/DOM练习内容1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>菜鸟教程(runoob.com)</t......
  • JavaScript五花八门的跳转方式
    我们最常见的跳转方式是location.href="http://www.baidu.com",这种是最常见的,但是常常使用location.replace,location.assign,,window.open,history.replaceState,location.......
  • 【JavaScript】5_常见的运算符(三种逻辑运算符+关系运算符)
    5、逻辑运算符1!逻辑非!可以用来对一个值进行非运算它可以对一个布尔值进行取反操作true-->falsefalse-->true如果对一个非布尔值进行取反,它会先将其转换为布尔值......
  • JavaScript的知识点整理
    最近写了一个员工管理作业,暴露了一些问题就是。JS的查找标签的时候,要确定返回的是DOM对象还是数组,document对象可以是任意dom对象,将查询范围限制在当前dom对象,1、直接查......
  • async,await
    注意点:①async/await是ES7新特性②async/await是写异步代码的新方式,以前的方法有回调函数和Promise③async/await是基于Promise实现的,它不能用于普通的回调函数④a......
  • JavaScript 解决 query string 乱码问题?
    在JavaScript中获取URL中的querystring时,如果字符串中含有中文字符或特殊字符,可能会遇到乱码问题。为解决这一问题,可以使用decodeURIComponent()函数对整个query......
  • NoClassDefFoundError: Could not initialize class MinioAsyncClient
    场景之前springboot集成的minio突然报错了,导致图片和附件查看和上传都出现问题。经过查看服务日志,提示错误如下java.lang.NoClassDefFoundError:Couldnotinitiali......
  • javaScript BOM - 窗口事件,创建定时器与清除定时器
    1.窗口事件事件描述load等页面内容全部加载完毕,包含页面dom元素,图片,flash,css执行DOMContentLoadedDOM加载完毕,不包含图片,flash,css等就可以执行,加载速度比load......
  • javaScript DOM - innerText与innerHtml,操作元素的属性,节点的获取,创建,添加,删除,修改
    1.innerText与innerHTML//替换元素里面的内容成文字document.querySelector(".main").innerText="文字";//替换元素里面的内容成标签document.querySelector(".main")......
  • JavaScript - 目录
    javaScript-输入与输出语句,javaScript中的数据类型,字符类型与其它基本数据类型的互相转换,typeof检测数据的数据类型javaScript-数组的创建方式,数组的属性,数组的常用方......