【JS学习】如何封装提供回调方法和带有默认参数的函数

原创已于 2024-12-20 15:34:23 修改 · 505 阅读

CC 4.0 BY-SA版权

文章标签：

于 2024-12-09 00:55:37 首次发布

首先要了解callback函数(回调函数),在JavaScript中，回调函数（Callback Function）是一种常见的编程模式。回调函数是一个作为参数传递给另一个函数的函数。当某个操作完成时，这个函数会被调用。回调函数通常用于处理异步操作，如网络请求、文件读取、定时器等。

1.封装一个带有回调函数的函数

// 封装一个带有回调函数的函数
function fetchData(url, callback) {
  // 模拟异步操作，比如从服务器获取数据
  setTimeout(() => {
    const data = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // 调用回调函数，并传递默认参数
    callback(null, data);
  }, 1000);
}

// 回调函数，接收默认参数
function processData(error, data) {
  if (error) {
    console.error('Error fetching data:', error);
  } else {
    console.log('Data fetched successfully:', data);
  }
}

// 使用封装的函数
fetchData('https://example.com/api/data', processData);

2.回调函数的参数

1.错误对象（Error Object）：如果操作失败，这个参数会包含错误信息。如果操作成功，这个参数通常是 null。
2.数据（Data）：如果操作成功，这个参数会包含返回的数据。

3.封装一个带有回调函数的函数，并提供默认参数

// 默认的回调函数
function defaultCallback(error, data) {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Data:', data);
  }
}

// 封装一个带有回调函数的函数，提供默认回调
function fetchData(url, callback = defaultCallback) {
  // 模拟异步操作，比如从服务器获取数据
  setTimeout(() => {
    const data = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // 调用回调函数，并传递默认参数
    callback(null, data);
  }, 1000);
}

// 使用封装的函数，不传递回调函数，使用默认回调
fetchData('https://example.com/api/data');

// 使用封装的函数，传递自定义回调函数
function customCallback(error, data) {
  if (error) {
    console.error('Custom Error:', error);
  } else {
    console.log('Custom Data:', data);
  }
}

fetchData('https://example.com/api/data', customCallback);

使用箭头函数对默认回调函数进行封装


// 定义一个带有回调函数的函数，并提供默认参数
function fetchData(url, callback = (error, data) => {
  if (error) {
    console.error('Default Error:', error);
  } else {
    console.log('Default Data:', data);
  }
}) {
  // 模拟异步操作，比如从服务器获取数据
  setTimeout(() => {
    const data = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // 调用回调函数，并传递默认参数
    callback(null, data);
  }, 1000);
}

// 使用带有默认回调函数的函数
fetchData('https://example.com/api/data');

// 使用自定义回调函数
function customCallback(error, data) {
  if (error) {
    console.error('Custom Error:', error);
  } else {
    console.log('Custom Data:', data);
  }
}

fetchData('https://example.com/api/data', customCallback);

按照我的习惯,我会这样写


// 定义一个带有回调函数的函数，并提供默认参数
function fetchData(url, callback = (error, data) => {
  if (error) {
    console.error('Default Error:', error);
  } else {
    console.log('Default Data:', data);
  }
}) {
  // 模拟异步操作，比如从服务器获取数据
  setTimeout(() => {
    const data = {
      id: 1,
      name: 'John Doe',
      email: 'john.doe@example.com'
    };

    // 调用回调函数，并传递默认参数
    callback(null, data);
  }, 1000);
}

// 使用带有默认回调函数的函数
fetchData('https://example.com/api/data');
//使用箭头函数,在调用时获取参数
fetchData('https://example.com/api/data', (error, data)=>{
  if (error) {
    console.error('Custom Error:', error);
  } else {
    console.log('Custom Data:', data);
  }
}));

4.解决回调地狱

当多个异步操作需要按顺序执行时，回调函数可能会导致代码嵌套过深，形成所谓的“回调地狱”。这会使代码难以阅读和维护。

4.1使用promise

function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        id: 1,
        name: 'John Doe',
        email: 'john.doe@example.com'
      };
      resolve(data);
    }, 1000);
  });
}

fetchData('https://example.com/api/data')
  .then(data => {
    console.log('Data fetched successfully:', data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

4.2使用async/await

async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码，从而提高可读性。

async function fetchData(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = {
        id: 1,
        name: 'John Doe',
        email: 'john.doe@example.com'
      };
      resolve(data);
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData('https://example.com/api/data');
    console.log('Data fetched successfully:', data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

main();

5.总结

使用callback函数封装代码,可以解决异步任务带来的问题,但是多个回调函数嵌套会造成回调地狱的问题.但是,依旧存在需要单独封装功能函数的情况.例如当前存在一个业务逻辑,需要异步解决,并且需要等待其完成后获取数据在执行后续逻辑,同时需要将这部分的功能代码提取出来进行封装以供复用.那么此时对这个单独的处理逻辑可以采用callback函数进行封装.可能我的描述不太清晰,但在实际工作中确实遇到需要这样做的情况