浏览器里console是异步的

console我一直以为是同步执行的,直到在一本书上看到,才了解到console本身有异步的特性。虽然在平常开发中经常使用console,但是真的没有意识到它的异步性。

下面就看下异步的实例

基础类型

该类型是我们开发中经常使用的,正是这种打印结果,让我们认为console是同步的。其实这种case也是异步的,因为执行到console时,拍摄了快照,记录了当时的变量值,当代码执行完返回到事件队列时,直接打印了前面记录的快照造成的

let foo = 'bar';
console.log("foo:", foo);
foo = 'test';

 

引用类型

引用类型,可以帮我们很好的验证console的异步性。看下图中的打印结果,如果是同步的话,打印结果应该时{},但是却是修改后的值{foo: 'bar'}

主要是因为,obj是引用类型,执行到console时,只是存储了对象的引用,对于对象内部的值未做记录。当代码执行完后,obj内部的值已经被修改。返回事件队列后,打印出的结果实际是修改后的值。

let obj = {};
console.log("obj:", obj);
obj.foo = 'bar';

结论

以上示例,都是在浏览器中的表现,也就是浏览器中console实际是异步快照,node中的console不一样,它是严格同步的,因此同样的代码打印结果是{}

浏览器之所以这样,是因为,在许多程序中,I/O被认为是低速的阻塞环节。在浏览器中,console.log会被异步处理以提高性能

 

### 什么是异步请求 异步请求是指客户端向服务器发送请求并等待响应的过程中,不会阻塞当前线程或界面的操作。这意味着,在发起请求的同时,其他任务可以继续运行而不必等到该请求完成后再执行下一项工作[^1]。 在 Web 开发领域中,常见的异步请求技术有多种实现方法: --- ### 异步请求的常见实现方式 #### 1. **Flask 中基于 Python 的异步请求** 在 Flask 应用程序中可以通过引入 `asyncio` 和 `aiohttp` 来支持异步操作。例如,定义一个异步路由 `/async` 并利用 `@app.route()` 配合装饰器处理跨域问题。视图函数内部可通过调用 `await asyncio.sleep(seconds)` 模拟耗时任务或者替代为真实的异步逻辑,如数据库查询或外部服务通信[^1]。 以下是简单代码示例: ```python from flask import Flask, jsonify import asyncio app = Flask(__name__) @app.route('/async') async def async_request(): await asyncio.sleep(2) # 模拟异步操作 return jsonify({"message": "Async request completed!"}) ``` --- #### 2. **Vue.js 中使用 Axios 进行异步数据交互** 对于前端框架 Vue.js 用户而言,借助于 Axios 可轻松完成 HTTP 请求。它提供了链式语法 `.then().catch()` 来分别捕获成功的响应以及错误情况下的异常处理机制[^2]。 下面展示如何通过 GET/POST 方式获取资源: ```javascript // GET 请求实例 axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error('Error:', error); }); // POST 请求实例 const postData = { key: 'value' }; axios.post('https://api.example.com/submit', postData) .then(response => { console.log('Success:', response.data); }) .catch(error => { console.error('Post Error:', error); }); ``` --- #### 3. **React Redux 下管理全局状态与异步流程** 当项目规模较大时,可能需要用到 React 结合 Redux 构建复杂的状态管理系统。此时为了加载远程数据源的内容,则需编写专门的动作创建者 (action creator),它们负责启动异步过程并将最终结果提交给 store 更新 UI 显示[^3]。 具体步骤如下所示: ```javascript function fetchChannelList() { return async function(dispatch){ try{ const res = await axios.get('https://example-api/channels'); dispatch(setChannels(res.data)); } catch(err){ console.error("Failed to load channels", err); } }; } ``` --- #### 4. **JavaScript 原生 Fetch API 执行异步任务** 除了第三方库之外,现代浏览器还内置了强大的工具——Fetch API ,用于简化 AJAX 编码模式。相比传统 XMLHttpRequest 对象更加简洁明了,并且完全兼容 Promise 设计理念[^4]。 这给出一段基础示范说明其基本结构: ```javascript fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json(); // 将 Response 转化成 JSON 格式 }) .then(data => { console.log('Data received:', data); // 输出解析后的数据 }) .catch(error => { console.error('There was a problem with the fetch operation:', error.message); }); ``` --- ### 总结 综上所述,无论是后端还是前端开发环境都存在大量关于异步编程的应用场景。每种语言和技术栈都有各自特色的解决方案可供开发者选用以满足特定需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值