首页 > 编程语言 >JavaScript 异步编程

JavaScript 异步编程

时间:2023-01-21 16:22:33浏览次数:48  
标签:function 异步 编程 JavaScript xhr async await

JavaScript 是一种单线程语言,这意味着只有一个线程可以在同一时间执行 JavaScript 代码。在 JavaScript 中,异步编程是一种编写不阻塞代码的方式,它可以在不影响页面响应的情况下执行长时间运行的操作。

JavaScript 中有几种常用的异步编程模型,如回调函数、Promise 和 async/await。

回调函数是最常用的异步编程模型,它允许在某个操作完成时调用一个函数。

Promise 是 ECMAScript 6 中引入的异步编程模型,它允许在将来的某个时间执行某个操作。

async/await 是 ECMAScript 2017 中引入的异步编程模型,它允许在同步代码中使用异步操作。

选择使用哪种异步编程模型取决于具体的场景和需求。回调函数是最简单和最基础的异步编程模型,适用于简单的异步操作。Promise 和 async/await 提供了更多的控制和灵活性,适用于复杂的异步操作。

举个例子,在浏览器中请求一个网络资源,可以使用回调函数来实现:

// 回调函数
function fetchData(callback) {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://api.example.com');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            callback(xhr.responseText);
        }
    };
    xhr.send();
}

fetchData(function(data) {
    console.log(data);
});

使用Promise:

// Promise
function fetchData() {
    return new Promise(function (resolve, reject) {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.example.com');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText);
            } else if (xhr.readyState === 4) {
                reject(xhr.status);
            }
        };
        xhr.send();
    });
}

fetchData()
    .then(function (data) {
        console.log(data);
    })
    .catch(function (error) {
        console.log(error);
    });
使用async/await:
// async/await
async function fetchData() {
    try {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.example.com');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                return xhr.responseText;
            } else if (xhr.readyState === 4) {
                throw xhr.status;
            }
        };
        xhr.send();
    } catch (error) {
        console.log(error);
    }
}

let data = await fetchData();
console.log(data);
从上面的例子可以看出,使用Promise和async/await可以使代码更加简洁,并且更易于维护和阅读。 需要注意的是,使用async/await需要在一个async函数中,并且需要使用await来等待异步操作的完成。   此外,还有其他的一些异步编程方式,比如使用 setTimeout, setInterval,requestAnimationFrame 等函数来实现异步编程。 例如,使用setTimeout可以实现延迟执行某个操作:
setTimeout(() => {
    console.log('Hello World!');
}, 2000);

使用setInterval可以实现重复执行某个操作:

setInterval(() => {
    console.log('Hello World!');
}, 2000);

使用requestAnimationFrame可以实现在浏览器重绘时执行某个操作:

function animate() {
    console.log('Hello World!');
    requestAnimationFrame(animate);
}

animate();

使用setTimeout, setInterval,requestAnimationFrame 这些方法时需要注意,如果不取消定时器,它们会一直运行下去,可能会导致性能问题。

 

JavaScript 中有多种异步编程模型可供选择,可以根据项目的需求来选择最合适的方式来实现。

标签:function,异步,编程,JavaScript,xhr,async,await
From: https://www.cnblogs.com/yuzhihui/p/17063871.html

相关文章

  • JavaScript 中 this 关键字的作用和如何改变其上下文
    一、this关键字的作用JavaScript中的this关键字引用了所在函数正在被调用时的对象。在不同的上下文中,this的指向会发生变化。在全局上下文中,this指向全局对象(在浏......
  • Python网络编程之微信机器人
    系统设计用Python实现了一个微信机器人,在微信公众号内发送消息,可以根据消息内容进行自动回复搭建Flask服务器,接收微信服务器发送的消息,并做出回复根据微信服务器发送过......
  • javascript: node.js
     consthttp=require("http");http.createServer(function(request,response){response.writeHead(200,{'Content-type':'text/html'});response.end('<h1>......
  • 前端面试题 - javaScript系列
    Time:2023-01-2021:14:37ES6系列1.说说var、let、const之间的区别var、let、const三者区别可以围绕下面五点展开:变量提升暂时性死区块级作用域重复声明修......
  • 读函数式编程思维笔记02_转变思维
    1. 命令式编程1.1. 按照“程序是一系列改变状态的命令”来建模的一种编程风格1.2. 传统的for循环1.2.1. 确立初始状态1.2.2. 每次迭代都执行循环体中的一系列命......
  • CUDA C++编程
    核函数作用调用核函数的时候,代码会被N个CUDA线程执行N次。 修饰符__global__返回值函数名(){  ...执行代码} 调用函数名<<<BlockNumber,ThreadNumber>>>()......
  • spring事件机制,异步发送消息到kafka
    步骤:1、创建eventpublicclassKafkaSendMsgEventextendsApplicationEvent{privateListdtoList;publicKafkaSendMsgEvent(Objectsource,ListdtoL......
  • java 网络编程
    起因:学习网编,发现里面的课程大量用到了io的知识,十分影响学习,所以转战io何为“流”流:数据在数据源(文件)和程序(内存)之间经历的路径输入流:数据从数据源(文件)到程序(内存)的路径......
  • javaScript
    JavaScript是一门流行脚本快速入门跟css一样,可以直接写在html中,放在script标签中alert可以弹出弹窗,内容用单引号引入的时候一定要成对出现,不能自闭和基本语法入门......
  • Consumer<T>函数式编程总结
    publicclassParent{publicvoidgetName(Stringname){System.out.println("name:"+name);}}publicclassSonextendsParent{@Ove......