getUserInfo() { self.$api.post(‘/sys/getUserInfo’).then( res => { } }) },将此方法写入一个js文件中,具体在js文件中的写法展示出来,在页面里调用,并对返回值做操作,都在uniapp场景中
时间: 2024-09-25 21:17:17 浏览: 32
微信小程序 获取用户信息(wx.getUserInfo)调整
在UniApp项目中,你可以创建一个名为getUserInfo.js的单独文件来封装这个API请求。首先,确保已安装axios库用于处理HTTP请求,如果没有,需要在main.js中引入并安装:
```bash
// main.js (如果未安装axios)
import axios from 'axios';
Vue.prototype.$http = axios;
```
然后,在getUserInfo.js文件中编写完整的函数:
```javascript
// getUserInfo.js
export default async function getUserInfo() {
const response = await self.$http.post('/sys/getUserInfo'); // 使用Vue.prototype.$http替换self.$api,因为后者依赖上下文
if (response.data && response.status === 200) {
return response.data; // 返回数据,假设data字段包含用户信息
} else {
console.error('Failed to get user info:', response);
throw new Error(response.message); // 如果有错误,则抛出异常
}
}
```
在需要调用这个函数的页面组件中,如App.vue或者某个自定义组件,你可以像下面这样导入并使用它:
```vue
<template>
<view>
<button @click="getUserInfoAsync">获取用户信息</button>
<!-- ...其他内容 -->
</view>
</template>
<script>
import getUserInfo from '@/utils/getUserInfo'; // 导入getUserInfo函数
export default {
methods: {
getUserInfoAsync() {
try {
const userInfo = await getUserInfo(); // 异步调用
console.log('Received user info:', userInfo);
// 这里可以进一步处理userInfo,比如更新状态或者显示到页面上
} catch (error) {
console.error('Error:', error);
}
},
},
};
</script>
```
以上就是在 UniApp 场景中调用 `getUserInfo()` 函数以及处理返回值的基本步骤。别忘了检查网络请求是否正常,以及适应不同的错误处理策略。
阅读全文