// 输出:计算结果为:8
二、使用XMLHttpRequest或Fetch API发送AJAX请求:
1. 使用XMLHttpRequest发送AJAX请求:
练习例子:
请编写一个函数getWeather,使用XMLHttpRequest发送GET请求获取天气信息,并在请求成功后将结果传递给回调函数。
function getWeather(callback) {
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://api.example.com/weather”, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
callback(response);
}
};
xhr.send();
}
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);
});
// 输出:计算结果为:8
源码分析:
* delayedSum函数返回一个新的Promise对象。
* 在Promise的构造函数中,定义了一个异步操作,使用setTimeout模拟,并将a和b相加的结果保存在result变量中。
* 在异步操作完成后,通过调用resolve函数,并传递结果result来处理异步操作的结果。
* 使用.then方法,可以在Promise对象的异步操作完成后执行回调函数,将结果result作为参数传递给回调函数,并处理异步操作的结果。
3. async/await的源码分析:
async/await是ES2017引入的一种处理异步操作的语法糖,它可以让异步代码看起来更像同步代码,并且可以使用try/catch来处理错误。
delayedSum函数的async/await版本的源码分析:
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
源码分析:
### 文末
逆水行舟不进则退,所以大家要有危机意识。
同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。
这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。
为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。
内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。
**269页《前端大厂面试宝典》**
包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。
![](https://img-blog.csdnimg.cn/img_convert/b98713ee557d94286de8afe404cb51d1.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/1d691ca297c9016828aff783a701e065.png)