1
如果下级函数存在异步操作,
并且上级函数需要等待下级函数的异步操作完成后再继续执行,
那么在上级函数中就需要使用 .then()
方法来处理异步操作的结果。
2
在let obj = axios.get(path).then((resp => { return resp })
这个链式调用中,确实会有两个返回值。
第一个值是 请求的结果axios.get(path)
第二个值是.then()中数据处理后的结果 Promise 对象 obj 。
3
.then
返回值是Promise 对象
4
- 发起异步请求:
axios.get(path) 得到第一返回值
- 处理响应结果:
.then((resp) => { ... }) 得到第二返回值
Promise 对象 -
上级函数调用下级带.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文章来源:https://www.toymoban.com/news/detail-553508.html
let mark = funcB().then((data) => {
// 父函数调用子函数, 子函数有.then() 父函数必须要.then()
// 在使用.then()方法时,如果只是想要获取异步操作的结果,而不需要对结果进行进一步处理,可以省略return关键字
});
console.log(mark)
第二种 async await文章来源地址https://www.toymoban.com/news/detail-553508.html
async function p顶级父函数() {
let xxx = await funcB();
console.log(xxx);
}
到了这里,关于vue .then和链式调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!