JavaScript Promise 对象的语法 async await 和.then

1 只用.then , 只能在.then中完成所有操作

function foo() {
  promise.then(data => {
    // 处理返回结果，并返回处理后的数据
    let newData = handleResult(data);
    console.log(newData);
  }).catch(error => {
    // 处理错误
  });
}
function handleResult(data) {
  // 进行其他操作，并返回结果
  return result;
}

2 用 async await -> 等待结果后 在继续下面的操作处理数据

async function foo() {
  try {
    const data = await promise;
    // 使用返回结果执行下面的代码
    let newData = handleResult(data);
    console.log(newData);
  } catch (error) {
    // 处理错误
  }
}

3 用 async await .then ,非要在.then外再处理数据执行操作 就要async await

async function foo() {
  const data = await promise.then(data => {
    // 处理返回结果，并返回处理后的数据
    return handleResult(data);
  });
  // 使用返回结果执行下面的代码
  console.log(data);
}

function handleResult(data) {
  // 对数据进行处理，并返回处理结果
  return processedData;
}

4 概念

这种写法使用的是 JavaScript Promise 对象的语法，属于 ES6（ES2015）标准中的一部分。
Vue.js 框架中也使用了 Promise 对象来处理异步操作，但是它具有更高级别的语法和封装，
例如使用 async/await 来简化 Promise 的使用，
以及提供了自己的异步处理机制（如 Vue.js 的生命周期钩子函数）
来帮助开发者更方便地处理异步操作。因此，
这种写法既可以是 JavaScript Promise 的写法，也可以是 Vue.js 中的写法，
这取决于具体的上下文和应用场景。

5 父调用子 , 子中有.then --> 子要返回Promise 对象

export function funcGetSevrverCsv() { // 要被上级调用 return 必须是 Promise 对象
    const promise = new Promise((resolve, reject) => {
    axios.get(path).then((resp) => { // 浏览器本地 要从前端服务器 获取 服务器某个文件夹的数据 所以是异步
      const newData = d3.csvParse(resp.data); // d3 将csv文本字符串 转换成 对象数组
      // 在这里处理CSV数据
      resolve(newData); // 正常 调用 resolve方法 返回数据
    }).catch((error) => {
      // 处理错误
      console.error(error); 
      reject(error); // 异常调用 reject方法 返回数据
    });
  });

  return promise; // 返回Promise对象
}

6 父调用子方法

父方法调用子方法,子有.then, 父也要等待

funcGetSevrverCsv()
  .then((data) => {
    // 处理解析后的CSV数据
    console.log(data);
  })
  .catch((error) => {
    // 处理错误
    console.error(error);
  });