可以使用 Promise 或者回调函数来处理异步请求的返回值。
方法一: Promise处理异步请求的返回值
使用 Promise 可以将异步请求的结果通过 resolve
和 reject
返回,然后通过 .then()
方法获取成功的结果,通过 .catch()
方法获取错误信息。
一、在common.js中写入请求后台的操作
核心代码
return new Promise((resolve, reject) => {
//请求操作
});
success: res => {
console.log('请求成功')
resolve(res.data); // 返回成功的结果
},
fail(res) {
console.log(res)
reject(res); // 返回失败的结果
}
完整代码
//http方式进行登录
function login_httpmode(username, password, cmd) {return new Promise((resolve, reject) => {uni.request({url: ip + 'sys/user/login',data: {cmd: cmd,usrname: username,passwd: password},method: 'POST',dataType: 'json',header: {"content-type": "application/json"},success: res => {console.log('请求成功')resolve(res.data); // 返回成功的结果},fail(res) {console.log(res)reject(res); // 返回失败的结果}});});
}
二、在页面调用common.js中的方法
核心代码
// 调用方法
common.login_httpmode(username, password, cmd)
.then(info => {
console.log('获取方法中的返回值',info); // 获取到正确的返回值
})
.catch(error => {
console.log(error); // 获取到错误信息
});
完整代码
<template><view><button @click="getdata">点我获取异步请求数据</button></view>
</template>
<script>import common from "@/utils/common.js"export default {data() {return {}; },methods: {getdata(){//定义几个测试数据var username = "admin";var password = "admin"var cmd = "124"// 调用方法common.login_httpmode(username, password, cmd).then(info => {console.log('获取方法中的返回值',info); // 获取到正确的返回值//下面可以执行获取到异步数据的方法if(info.success == true){console.log("登录数据正确")} else{console.log("登录数据错误")}}).catch(error => {console.log(error); // 获取到错误信息});}},};
</script>
<style></style>
方法二:回调函数来处理异步请求的返回值
使用回调函数时,将回调函数作为参数传递给异步请求方法,在请求成功时调用 callback(null, res.data)
返回成功的结果,在请求失败时调用 callback(res)
返回错误信息。
一、在common.js中写入请求后台的操作
核心代码
//参数中写入 callback
function login_httpmode(username, password, cmd, callback) {}
//请求成功与失败时
success: res => {
callback(null, res.data); // 返回成功的结果
},
fail: res => {
callback(res); // 返回失败的结果
}
完整代码
function login_httpmode(username, password, cmd, callback) {uni.request({url: ip + 'sys/user/login',data: {cmd: cmd,usrname: username,passwd: password},method: 'POST',dataType: 'json',header: {"content-type": "application/json"},success: res => {console.log('请求成功');console.log(res.data);callback(null, res.data); // 返回成功的结果},fail: res => {console.log(res);callback(res); // 返回失败的结果}});
}
二、在页面调用common.js中的方法
核心代码
common.login_httpmode(username, password, cmd, (error, info) => {
if (error) {
console.log(error); // 获取到错误信息
} else {
console.log(info); // 获取到正确的返回值
}
});
完整代码
<template><view><button @click="getdata">点我获取异步请求数据</button></view>
</template>
<script>import common from "@/utils/common.js"export default {data() {return {}; },methods: {getdata(){//定义几个测试数据var username = "admin";var password = "admin"var cmd = "124"// 调用方法common.login_httpmode(username, password, cmd, (error, info) => {if (error) {console.log(error); // 获取到错误信息} else {console.log(info); // 获取到正确的返回值}});}},};
</script>
<style></style>