同步与异步,教你写

JavaScript中的同步(Synchronous)和异步(Asynchronous)是用来描述代码执行顺序的概念。同步指的是代码按照顺序一行一行地执行,而异步指的是代码可以不按顺序执行,可以在某些操作完成之前继续执行后面的代码。

在JavaScript中,常见的异步操作包括网络请求、文件读写、定时器等等,这些操作需要花费一定的时间来完成,如果使用同步方式执行,会导致程序阻塞,用户体验不佳。因此,JavaScript提供了一些机制来处理异步操作,以保证代码的执行效率和流畅性。

同步与异步

同步示例代码:

javascriptCopy 复制代码
console.log("开始");

function syncOperation() {
  console.log("同步操作");
}

syncOperation();

console.log("结束");

输出结果:

Copy 复制代码
开始
同步操作
结束

在上述代码中,同步操作syncOperation()按照顺序执行,没有任何延迟。因此,控制台会依次输出"开始"、"同步操作"和"结束"。

异步示例代码:

javascriptCopy 复制代码
console.log("开始");

function asyncOperation() {
  setTimeout(function() {
    console.log("异步操作");
  }, 2000);
}

asyncOperation();

console.log("结束");

输出结果:

Copy 复制代码
开始
结束
异步操作

在上述代码中,异步操作setTimeout()使用了一个定时器,延迟执行回调函数。因此,在调用asyncOperation()之后,程序会立即执行后面的代码,不会被定时器阻塞。2秒后,定时器触发回调函数,控制台输出"异步操作"。

值得注意的是,异步操作的执行顺序是不确定的,但它们不会阻塞主线程,可以提高代码的执行效率和用户体验。

除了定时器,JavaScript还提供了其他处理异步操作的机制,例如Promise、async/await等。这些机制能够更方便地管理异步代码,使其更易读和维护。

总结起来,同步指的是代码按照顺序一行一行地执行,而异步指的是代码可以不按顺序执行,在某些操作完成之前可以继续执行后面的代码。异步操作常用于处理耗时的操作,以保证程序的流畅性和响应性。

创建异步

当你提到 "async JavaScript and XML"(AJAX)时,实际上指的是一种用于创建异步网络请求的技术。这并不是 JavaScript 的特定功能,而是一种使用 JavaScript 来发送和接收数据的方法。AJAX 可以帮助网页在不刷新整个页面的情况下,与服务器进行数据交换和更新。

AJAX 的主要组成部分包括:

  1. JavaScript: 用于发起异步请求的脚本语言。
  2. XMLHttpRequest 对象(XHR)或 Fetch API: 用于在后台与服务器交换数据。
  3. XML(有时) : 在名称中包含 XML,但实际上并不一定使用 XML。最常见的是使用 JSON(JavaScript Object Notation)格式来传输数据。

AJAX 可以使用户体验更加流畅,因为它允许网页在后台与服务器通信,更新部分内容而不必重新加载整个页面。这在加载动态内容、实时更新或处理用户输入时非常有用。

现代的 JavaScript 已经发展出了更多方法来处理异步请求,例如使用 fetch() API 替代旧的 XMLHttpRequest,以更简单和灵活的方式处理网络请求

异步函数

在 JavaScript 中,定时器函数(如 setTimeoutsetInterval)是异步的。

当你调用 setTimeout 函数时,它会在指定的延迟时间之后将回调函数插入到事件队列中。然后,JavaScript 引擎会继续执行后续的代码,而不会等待定时器的回调函数执行。

类似地,setInterval 函数会按照指定的时间间隔周期性地将回调函数插入到事件队列中,但也不会阻塞代码的执行。

一旦 JavaScript 引擎完成当前的执行任务,并且事件队列为空时,它会检查并执行事件队列中的下一个任务。这包括定时器的回调函数,它会在预定的时间到达后被执行。

因此,定时器函数是在后台异步执行的,它们不会阻塞主线程的执行,使得其他代码可以继续执行。这也是为什么可以使用定时器函数来实现延迟执行或周期性执行的功能。

处理异步

async

async 是用于定义异步函数的关键字。它可以与 await 关键字一起使用,使异步操作更加简洁和易读。

当函数使用 async 关键字进行声明时,它会返回一个 Promise 对象。在函数内部,可以使用 await 关键字来暂停函数的执行,等待一个 Promise 对象的解决(resolve)或拒绝(reject)。这样,就能够以同步的方式编写异步代码,避免了回调函数的嵌套和复杂性。

异步函数使用 async 关键字进行声明,例如:

js 复制代码
//这里只展示代码的书写
(async function(){
const res=await fetch('https://yjhx77.laf.run/get-list')
const {data}=await res.json()
console.log(data);
console.log('ok');
})()

在异步函数内部,可以使用 await 关键字来等待一个 Promise 对象的解决。await 后面可以跟随一个返回 Promise 的表达式,如函数调用、Promise 对象、或者其他异步函数调用。

使用 async/await 可以改善异步代码的可读性和可维护性,使得异步操作可以以类似同步代码的方式进行处理。

Promise

Promise 是 JavaScript 中用于处理异步操作的一种机制。它是一种表示异步操作最终完成或失败的对象。

Promise 对象有三个状态:

  1. Pending(进行中):初始状态,表示异步操作正在进行中。
  2. Fulfilled(已成功):表示异步操作已经成功完成。
  3. Rejected(已失败):表示异步操作已经失败。

一个 Promise 对象可以通过调用 resolve 函数将其状态从 Pending 转变为 Fulfilled,并返回异步操作的结果;或者通过调用 reject 函数将其状态从 Pending 转变为 Rejected,并返回一个错误信息。

js 复制代码
setTimeout(function(){
    console.log('1000ms以后');
},1000)
const p =new Promise((resolve,reject)=>{
    console.log('实例化promise');
    //异步任务
    setTimeout(()=>{
      console.log('定时器运行');
      resolve()  //确认执行成功了  调用resolve函数就可以运行p.then
    },1000)
})
p.then(function(){
    console.log('1000ms以后,hello');
    
})

Promise 对象提供了 then 方法,可以在异步操作完成时执行特定的回调函数。该方法接收两个参数:一个用于处理成功状态的回调函数和一个用于处理失败状态的回调函数。

另外,Promise 还提供了其他一些方法,如 catch 方法用于捕捉错误,finally 方法无论 Promise 是成功还是失败都会执行指定的回调函数。

使用 Promise 可以更加优雅地处理异步操作,避免了回调地狱(Callback Hell)的问题,使代码结构更加清晰和可读。

相关推荐
sunshine64110 分钟前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻33 分钟前
Vue(四)
前端·javascript·vue.js
蜜獾云35 分钟前
npm淘宝镜像
前端·npm·node.js
dz88i835 分钟前
修改npm镜像源
前端·npm·node.js
Jiaberrr39 分钟前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook
程序员_三木1 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
顾平安2 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网2 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工2 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
不是鱼2 小时前
构建React基础及理解与Vue的区别
前端·vue.js·react.js