# Js 回调函数

Js 回调函数

文章目录

Js 回调函数
- 回调函数的定义和使用
- 回调函数的常见用途
- - 异步操作
  - 事件处理
- 回调函数的优点和缺点
- - 优点
  - 缺点
- 回调地狱
- 解决回调地狱的方法
- - 使用 Promise
  - 使用 async/await
- 应用
- - 函数式编程中的回调函数
  - - 高阶函数
    - 函数柯里化
  - 异步编程中的回调函数
  - 回调函数的错误处理
  - - 传递错误参数
    - 使用 Promise 和`async/await`

回调函数是一种作为参数传递给另一个函数的函数，它在特定的事件发生或某个操作完成后被调用。

回调函数的定义和使用

sayHellow函数接收一个回调函数作为参数。在函数内部执行一些操作后，调用了传递进来的回调函数。

<!DOCTYPE html>
<button onclick="test1()">回调函数测试</button>
<html>
<body><script type="text/javascript">function sayHellow(msg, callback) {alert(msg)if (typeof callback === "function") {callback(msg);}}function one(msg) {alert("回调函数执行结果：" + msg)}function test1() {sayHellow('你好张三', one);sayHellow('你好李四', function () {alert('匿名函数实现回调')})}</script>
</body>
</html>

回调函数的常见用途

异步操作

在 JavaScript 中，很多操作是异步的，比如网络请求、文件读取等。
回调函数在处理异步操作时非常有用。例如，使用XMLHttpRequest进行网络请求时，可以在请求完成后调用回调函数来处理响应数据。

事件处理

在处理用户交互事件（如点击按钮、鼠标移动等）时，回调函数可以在事件发生时执行相应的操作。
例如，给一个按钮添加点击事件监听器，当按钮被点击时，回调函数会被调用。

document.getElementById('myButton').addEventListener('click', function() {console.log('按钮被点击了！');
});

回调函数的优点和缺点

优点

灵活性：可以根据不同的需求传递不同的回调函数，实现不同的行为。
异步处理：非常适合处理异步操作，确保在操作完成后执行特定的逻辑。

缺点

回调地狱：当多个异步操作依赖于彼此的结果时，可能会导致回调函数嵌套过多，使代码难以阅读和维护。
错误处理困难：在复杂的回调函数链中，错误处理可能变得复杂。

回调地狱

当多个异步操作依赖于彼此的结果时，可能会导致回调函数嵌套过多，形成所谓的"回调地狱"

doSomethingAsync(function() {doAnotherAsyncThing(function() {doYetAnotherAsyncThing(function() {// 更多嵌套...});});
});

解决回调地狱的方法

使用 Promise

Promise 是一种用于处理异步操作的对象，它可以避免回调地狱，并提供了一种更清晰的方式来处理异步代码。
例如，可以使用then方法链式调用多个异步操作，每个操作返回一个 Promise。

function doSomethingAsync() {return new Promise(function(resolve, reject) {setTimeout(function() {console.log('异步操作 1 完成');resolve();}, 1000);});
}function doAnotherAsyncThing() {return new Promise(function(resolve, reject) {setTimeout(function() {console.log('异步操作 2 完成');resolve();}, 1000);});
}// 使用 then 方法调用链
doSomethingAsync().then(doAnotherAsyncThing).then(function() {console.log('所有异步操作完成');});

使用 async/await

async/await是基于 Promise 的语法糖，它使异步代码看起来更像同步代码，更加易读和易于维护。
例如，可以使用async函数和await关键字来等待异步操作完成。

async function performAsyncOperations() {// 等到 doSomethingAsync() 方法执行结束再执行后面的await doSomethingAsync();// 等 doAnotherAsyncThing() 执行完成后再执行后面的 await doAnotherAsyncThing();console.log('所有异步操作完成');
}performAsyncOperations();

应用

函数式编程中的回调函数

高阶函数

数组的map、filter和reduce等方法都是高阶函数，它们接收一个回调函数作为参数，用于对数组中的每个元素进行操作。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function(number) {return number * 2;});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

map方法接收一个回调函数作为参数，该回调函数将数组中的每个元素乘以2，并返回一个新的数组。

函数柯里化

add函数接收一个参数a，并返回一个新的函数，该函数接收参数b并返回a + b的值。回调函数在这里被用于延迟计算，直到所有的参数都被提供。

<!DOCTYPE html>
</html>
<script>function add(a) {return function (b) {return a + b;};}const addOne = add(5);console.log(addOne(3)); // 8
</script>

异步编程中的回调函数

async和await是 ES2017 引入的语法糖，用于简化异步操作的处理。

回调函数的错误处理

传递错误参数

回调函数通常接收一个错误参数作为第一个参数，用于在发生错误时通知调用者。如果没有错误发生，这个参数通常为null。
例如，下面的代码展示了如何在异步操作中处理错误：

function asyncOperation(callback) {setTimeout(function() {const error = null;const result = 'success';// 返回错误callback(error, result);}, 1000);
}asyncOperation(function(err, result) {if (err) {console.error(err);} else {console.log(result);}
});

asyncOperation函数模拟了一个异步操作，在操作完成时调用回调函数，并传递一个错误参数和一个结果参数。调用者可以根据错误参数的值来决定如何处理结果。

使用 Promise 和`async/await`

Promise 和async/await提供了一种更简洁的方式来处理错误。
在 Promise 中，可以使用catch方法来处理拒绝的 Promise，在async/await中，可以使用try/catch块来捕获异步操作中的错误。

// 返回 promise 
function asyncOperation() {return new Promise((resolve, reject) => {setTimeout(() => {const error = null;const result = 'success';if (error) {reject(error);} else {resolve(result);}}, 1000);});
}async function executeAsyncOperation() {try {// 等待 asyncOperation 返回结果const result = await asyncOperation();console.log(result);} catch (err) {console.error(err);}
}// 调用 executeAsyncOperation()
executeAsyncOperation();

asyncOperation函数返回一个 Promise，在异步操作完成时，根据是否有错误来决定是 resolve 还是 reject 这个 Promise。
在executeAsyncOperation函数中，使用async/await来调用asyncOperation函数，并使用try/catch块来捕获可能发生的错误。