javascript异步编程从入门到精通

// 输出：计算结果为：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)