封装了 wx.request 函数,使得发送网络请求更加简便和易用。同时,在请求过程中做了一些错误处理和加载提示的操作,提升了用户体验。
在utils文件下创建request.js的文件
javascript
// request请求
// 引入env中的url
import env from './env.js';
//在这里添加我们的专业域名
const app = getApp()
let loadingCount = 0
console.log(env.baseUrl, "baseUrl")
module.exports = {
/**
* url:请求的接口地址
* method:请求方式 GET,POST....
* data:要传递的参数
* showLoading 接口请求时是否显示loading,默认展示
*/
request: (url, data, method, showLoading = true) => {
let _url = `${env.baseUrl}${url}`;
let tokenData = {}
if (app && app.globalData.token) {
tokenData = {
Authorization: app.globalData.token
}
}
return new Promise((resolve, reject) => {
if (loadingCount == 0 && showLoading) {
wx.showLoading({
title: '正在加载',
mask: true
});
}
loadingCount++;
wx.request({
url: _url,
data: {
...data
},
method: method || 'GET',
header: {
'content-type': 'application/json',
...tokenData
},
success: (res) => {
let {
code
} = res.data;
if (code === 200) {
if (res.data.data && res.data.data.errorMsg) {
wx.showToast({
title: res.data.data.errorMsg,
icon: "none",
duration: 3000
})
return
}
resolve(res.data.data);
} else {
reject(res.data)
// wx.showToast({
// icon:"error",
// title: '数据请求错误',
// })
}
},
fail() {
reject('接口有误,请检查')
},
complete(res) {
if (loadingCount > 0) {
loadingCount--;
}
if (loadingCount === 0 && showLoading) {
wx.hideLoading()
}
if (res.data) {
if (res.data.code === 200) {
if (res.data.data && res.data.data.errorMsg) {
wx.showToast({
title: res.data.data.errorMsg,
icon: "none",
duration: 3000
})
return
}
} else if (res.data.code === 401) {
wx.showToast({
title: res.data.message || "登录状态超时",
icon: "none",
duration: 3000
})
wx.navigateTo({
url: '/pages/login/login'
})
} else {
wx.showToast({
title: res.data.message || "网络繁忙,请稍后再试",
icon: "none",
duration: 3000
})
reject(res.data)
}
} else {
wx.showToast({
title: "网络繁忙,请稍后再试",
icon: "none",
duration: 3000
})
reject(res.data)
}
}
});
});
},
}
注解
- 引入 env.js 文件,该文件中包含了请求的基础 URL。 env.js 文件通常用于存放环境配置信息,例如不同环境下的接口地址、域名等。这样做的好处是可以将环境配置信息与代码逻辑分离,便于管理和维护
__wxConfig.envVersion 只能在小程序的 js 文件中使用,在 wxml 和 wxss 文件中无法使用。
javascript
const env = wx.getAccountInfoSync().miniProgram.envVersion
const baseApi = {
// 开发版环境
develop: {
baseUrl: "https://xxxx.com"
},
// 体验版
trial: {
baseUrl: "https://xxxx.com"
},
// 正式版
release: {
baseUrl: "https://xxxx.com"
}
};
const api = baseApi[env]
console.log(__wxConfig.envVersion,"__wxConfig.envVersion 是一个可以用来判断当前小程序运行的环境变量。它的值通常为 develop, trial, 或者 release")
export default api;
- 定义了一个全局变量 loadingCount,用于记录正在加载的请求数量。
- 在请求完成后的回调函数中,判断 loadingCount 的值,如果大于 0,则减少 loadingCount 的值。然后根据 showLoading 参数判断是否隐藏加载提示,如果需要隐藏,则调用 wx.hideLoading 方法。
页面使用
javascript
import {
request
} from '../../utils/request'
Page({
handleGetList() {
// get
request('接口地址',{请求参数}).then(res=>{ })
// post
request('接口地址',{请求参数},"POST").then(res=>{ })
},
})