Web前端最全javascript异步编程从入门到精通(1)，跳槽面试大厂被拒

最新推荐文章于 2024-09-30 15:42:36 发布

2401_84438067

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量384

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84438067/article/details/138971873

版权

程序员专栏收录该内容

159 篇文章 1 订阅

订阅专栏

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

function delayedSum(a, b) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var result = a + b;
resolve(result);
}, 1000);
});
}

delayedSum(5, 3)
.then(function(result) {
console.log(“计算结果为：” + result);
});
// 输出：计算结果为：8


3. async/await：  
 async/await是ES2017引入的一种处理异步操作的语法糖，它可以让异步代码看起来更像同步代码，并且可以使用try/catch来处理错误。


练习例子：  
 请使用async/await改写上述的delayedSum函数，并编写一个包装函数来调用它。

function delayedSum(a, b) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var result = a + b;
resolve(result);
}, 1000);
});
}

async function sum() {
try {
var result = await delayedSum(5, 3);
console.log(“计算结果为：” + result);
} catch (error) {
console.error(“处理错误：” + error);
}
}

sum();
// 输出：计算结果为：8


二、使用XMLHttpRequest或Fetch API发送AJAX请求：


1. 使用XMLHttpRequest发送AJAX请求：


练习例子：  
 请编写一个函数getWeather，使用XMLHttpRequest发送GET请求获取天气信息，并在请求成功后将结果传递给回调函数。

function handleWeather(response) {
console.log(“天气信息：” + response);
}

getWeather(handleWeather);
// 输出：天气信息：{…}


2. 使用Fetch API发送AJAX请求：


练习例子：  
 请使用Fetch API改写上述的getWeather函数，返回一个Promise对象，将天气信息传递给resolve函数。

function getWeather() {
return fetch(“https://api.example.com/weather”)
.then(function(response) {
return response.json();
});
}

getWeather()
.then(function(data) {
console.log(“天气信息：” + data);
});
// 输出：天气信息：{…}


源码分析：


1. 回调函数的源码分析：  
 回调函数是最基本的处理异步操作的方式。通过将一个函数作为参数传递给异步函数，在异步操作完成后调用该函数来处理结果。


delayedSum函数的源码分析：

function delayedSum(a, b, callback) {
setTimeout(function() {
var result = a + b;
callback(result);
}, 1000);
}

function handleResult(result) {
console.log(“计算结果为：” + result);
}

delayedSum(5, 3, handleResult);
// 输出：计算结果为：8


异步编程在JavaScript中是不可或缺的一部分，它能够提高代码的效率和响应性。本文介绍了处理异步操作的基本方式，包括回调函数、Promise和async/await。此外，还学习了如何使用XMLHttpRequest或Fetch API发送AJAX请求，并处理响应数据。通过练习例子和答案的学习，读者可以巩固所学知识，并应用到实际项目中。如果想要深入学习和探索异步编程，建议进一步查阅相关文档和教程，以掌握更多高级的异步编程技术和工具。


源码分析：


* delayedSum函数接受三个参数：a、b和callback。
* 在函数内部，通过setTimeout模拟了一个异步操作，将a和b相加的结果保存在result变量中。
* 在异步操作完成后，通过调用回调函数callback，并传递结果result来处理异步操作的结果。
* handleResult函数是回调函数，用于处理异步操作的结果。在本例中，它会将结果打印到控制台上。


2. Promise的源码分析：  
 Promise是一种更优雅的处理异步操作的方式，它可以链式地处理多个异步操作，并提供了更好的错误处理机制。


delayedSum函数的Promise版本的源码分析：

function delayedSum(a, b) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
var result = a + b;
resolve(result);
}, 1000);
});
}

delayedSum(5, 3)
.then(function(result) {
console.log(“计算结果为：” + result);
});