封装 uni.request()
方法,并挂载到全局使用
-
项目根目录创建一个
uti
目录,uti
目录下创建一个api.js
文件
-
api.js
文件中封装uni.request()
方法// 请求服务器地址 const baseURL = 'http://localhost:8080' // 向外暴露一个方法 myRequest export const myRequest = (options) => { //加载loading uni.showLoading({ title:'加载中' }) return new Promise((resolve, reject) => { uni.request({ // 开发者服务器接口地址(请求服务器地址 + 具体接口名) url: baseURL + options.url, // 请求方式(若不传,则默认为 GET ) method: options.method || 'GET', // 请求参数(若不传,则默认为 {} ) data: options.data || {}, // 请求成功 success: (res) => { // 此判断可根据自己需要更改 if (res.data.status !== 1) { return uni.showToast({ title: '获取数据失败!' }) } resolve(res) }, // 请求失败 fail: (err) => { uni.showToast({ title: '请求接口失败!' }) reject(err) }, //请求结束之后,执行的回调函数(成功或失败都会执行) complete() { //隐藏loading uni.hideLoading() } }) }) }
-
main.js
项目入口文件中引入方法,挂载到全局使用// 引入 api.js 文件 import { myRequest } from 'uti/api.js' // 挂载到全局使用 Vue.prototype.$myRequest = myRequest
-
使用封装的
myRequest
方法第一种方式:
await
methods: { async getData() { const res = await this.$myRequest({ url: '/api/getUser' }) console.log(res) } }
第二种方式:
then
methods: { getData() { this.$myRequest({ url: '/api/getUser' }).then(res => { console.log(res) }).catch(err => { console.log(err) }) } }