vue .then和链式调用

1 

如果下级函数存在异步操作，

并且上级函数需要等待下级函数的异步操作完成后再继续执行，

那么在上级函数中就需要使用 .then() 方法来处理异步操作的结果。

2

在let obj =  axios.get(path).then((resp => { return resp })

这个链式调用中，确实会有两个返回值。

第一个值是 请求的结果axios.get(path)

第二个值是.then()中数据处理后的结果 Promise 对象 obj 。

3 

.then返回值是Promise 对象

4

1. 发起异步请求：axios.get(path) 得到第一返回值
2. 处理响应结果：.then((resp) => { ... }) 得到第二返回值Promise 对象
3. 上级函数调用下级带.then的函数必须 .then((data) => { ... })

5 上级函数 使用了.then(), 下级函数可以不使用.then,直接返回请求结果

第一种 上级函数 .then() ,下级函数.then() 返回处理完的数据

export async function funcB() { // 这个函数的上级函数调用他 要加 async
  
  let newData = []
  
    newData = fetchData().then((data) => {
    
      console.log(data); // 直接使用数据
      return data;
    });
    console.log(newData);

  }

  return newData;
}

function fetchData() {
  try {
    let path = 'dt.csv'
    let obj = axios.get(path).then((resp) => {
        // 这里处理数据
         return data;
        })

    return obj; // 返回Promise 对象
  } catch (error) {
    // 处理错误
    console.error(error);
    return null;
  }
}

第二种 上级函数 .then() ,下级函数只返回请求结果

export async function funcB() { // 这个函数的上级函数调用他 要加 async
  
  let newData = []
  
    newData = fetchData().then((data) => {
    // 这里处理数据
      console.log(data); // 在这里处理 newData
      return data;
    });
    console.log(newData);

  }

  return newData;
}

function fetchData() {
  try {
    let path = 'dt.csv'
    let obj = axios.get(path)

    return obj; // 返回Promise 对象
  } catch (error) {
    // 处理错误
    console.error(error);
    return null;
  }
}

最顶级父函数调用 子函数

第一种 .then

let mark = funcB().then((data) => { 
        // 父函数调用子函数, 子函数有.then() 父函数必须要.then()
        // 在使用.then()方法时，如果只是想要获取异步操作的结果，而不需要对结果进行进一步处理，可以省略return关键字
      });
      console.log(mark)

第二种 async await

async function p顶级父函数() {
  let xxx = await funcB();
  console.log(xxx);
}