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（ES）标准中的一部分。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);});
