通过axios请求数据,将promise中的数据return出外层调用函数去:
之前的例子没有写得清晰易懂,重新写了一版:
更新示例:
//伪axios异步获取数据
function fakeAxios() {
return new Promise((res, rej) => {
setTimeout(() => {
res("result"), 100;
});
});
}
// 在then中得到的值,如何return到本函数外。
function getNothing() {
//这样肯定undefined,函数体在赋值执行前返回
let result;
fakeAxios().then((res) => {
result = res + "0";
});
return result;
}
//以下5种为可行方案
async function getResult1() {
let result;
await fakeAxios().then((res) => {
result = res + "1";
});
return result;
}
async function getResult2() {
let res = await fakeAxios();
return res + "2";
}
function getResult3() {
return fakeAxios(); //放到外层处理
}
function getResult4() {
return fakeAxios().then((res) => {
return Promise.resolve(res + "4");
});
}
function getResult5() {
return fakeAxios().then((res) => {
return new Promise((resolve) => {
resolve(res + "5");
});
});
}
async function main() {
let r0 = await getNothing(); //错误示例
let r1 = await getResult1();
let r2 = await getResult2();
let r3;
await getResult3().then((res) => (r3 = res + "3"));
let r4 = await getResult4();
let r5 = await getResult5();
console.log(r0, r1, r2, r3, r4, r5);
}
main();
//输出 undefined result1 result2 result3 result4 result5
之前的版本:
第一种方式,不进then,整体扔出去,数据在外层处理
checkUsernameExist() {
return this.$axios.post("user_exsit", {
username: this.formSignup.username
});
},
var checkUsername = async (rule, value, callback) => {
if (!value) {
return callback(new Error("用户名不能为空"));
} else {
var x = await this.checkUsernameExist();
console.log(x);
if (false) {
callback(new Error("用户名重复"));
} else {
callback();
}
}
};
第二种方式,在then中进行一定数据处理以后再return一个Promise.resolve()方法
checkUsernameExist() {
return this.$axios
.post("user_exsit", {
username: this.formSignup.username
})
.then(res => {
console.log(res);
return Promise.resolve(res.data);
});
},
第二种还可以写为new Promise的形式:
checkUsernameExist() {
return this.$axios
.post("user_exsit", {
username: this.formSignup.username
})
.then(res => {
console.log(res);
return new Promise(resolve => {
resolve(res.data);
});
});
},
版权声明:本文为henjuewang原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。