写一个包含axios 异步加载 以及渲染的 回调函数

在JavaScript中，特别是使用axios进行异步数据请求时，你可以创建一个带有回调函数的示例如下：

import axios from 'axios';

function fetchData(url, callback) {
  // 发起异步GET请求
  axios.get(url)
    .then((response) => {
      // 数据成功获取
      const data = response.data;
      
      // 在这里对数据进行处理，如过滤、转换等
      const processedData = processData(data);

      // 调用回调函数，传递处理后的数据
      callback(processedData);
    })
    .catch((error) => {
      // 处理错误
      console.error('Error:', error.message);
      callback(null); // 或者其他错误处理方式
    });
}

// 使用回调函数的地方
fetchData('https://api.example.com/data', (data) => {
  if (data) {
    // 渲染数据
    renderDataToDOM(data);
  } else {
    console.log('Failed to load data.');
  }
});

function renderDataToDOM(data) {
  // 根据data的内容动态生成HTML并插入到DOM中
  // 这里只是一个简化的例子，实际渲染可能涉及复杂的模板引擎或React/Vue等框架
  document.getElementById('data-container').innerHTML = JSON.stringify(data);
}

在这个例子中，`fetchData`函数接收一个URL和一个回调函数作为参数。当请求成功，它会调用回调函数，将处理过的数据传入；若请求失败，则通过回调告知处理错误。`renderDataToDOM`函数负责将数据渲染到页面上。