同步与异步,教你写

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)的问题,使代码结构更加清晰和可读。

相关推荐
neter.asia2 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫2 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年21 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_23 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891125 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾26 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking26 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu28 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym33 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫34 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js