使用 async/await 封装 wx.request 请求
关于微信小程序开发中的接口请求封装。
下面是一个使用 async/await 方式封装 wx.request 的完整实现,包含登录超时(401)和404等常见错误的处理逻辑:
// 封装请求方法
const request = (options) => {return new Promise((resolve, reject) => {const defaultOptions = {method: 'GET',header: {'content-type': 'application/json','Authorization': wx.getStorageSync('token') || ''},timeout: 10000 // 10秒超时};const requestOptions = { ...defaultOptions, ...options };wx.request({...requestOptions,success: (res) => {const { statusCode, data } = res;if (statusCode === 401) {handleUnauthorized();reject(new Error('登录状态已过期,请重新登录'));return;}if (statusCode === 404) {reject(new Error('请求的资源不存在'));return;}if (statusCode >= 200 && statusCode < 300) {resolve(data);} else {reject(new Error(`请求失败,状态码: ${statusCode}`));}},fail: (err) => {if (err.errMsg.includes('timeout')) {reject(new Error('请求超时,请检查网络连接'));} else {reject(new Error('网络错误,请检查网络连接'));}}});});
};// 处理未授权
const handleUnauthorized = () => {wx.removeStorageSync('token');wx.showModal({title: '提示',content: '登录已过期,请重新登录',showCancel: false,success: () => {wx.redirectTo({url: '/pages/login/login'});}});
};// 封装的API请求方法(使用async/await)
const fetchData = async () => {try {// 使用await等待请求完成const response = await request({url: 'https://api.example.com/data',method: 'GET'});console.log('请求成功', response);return response;} catch (error) {console.error('请求失败:', error.message);wx.showToast({title: error.message,icon: 'none'});throw error; // 可以选择继续抛出错误或处理}
};// 使用示例
const getData = async () => {try {const data = await fetchData();// 处理数据...} catch (error) {// 错误处理...}
};// 页面中调用
Page({async onLoad() {try {const result = await fetchData();this.setData({ list: result.data });} catch (error) {// 页面特定的错误处理}}
});