一. 前言
在做小程序开发的时候难免会涉及到网络请求操作,小程序提供的原生网络请求已经不能够满足我们的需求,需要对其进行封装,做出优化
二. 实现流程
1. 创建request文件夹,创建http.js文件
2. 代码注释及详解
- 本次封装仅涉及加载动画及提示,更多功能可以依照项目实际开发自行添加
// 定义基准路径
const baseUrl = '此处为基准路径'
// 抛出request方法 url---路径, method---请求方式, data---参数
export const request = function (url, method, data) {
// 返回Promise实例
return new Promise((reslove, reject) => {
// 开启加载动画
wx.showLoading({
title: '加载中...',
})
// 请求接口
wx.request({
// 基准路径 + 接口路径
url: baseUrl + url,
// 使用'GET'或传入请求方式
method: method || 'GET',
// 空对象或传入参数
data: data || {},
// 请求成功
success(res) {
// 抛出成功数据
reslove(res)
// 成功提示信息 此处可与成功返回数据互通 以实际开发为准
wx.showToast({
title: '123',
})
// 关闭加载动画
wx.hideLoading()
},
// 请求失败
fail(err) {
// 抛出失败数据
reject(err)
// 失败提示信息 此处可与失败返回数据互通 以实际开发为准
wx.showToast({
title: '加载失败,请重试',
})
// 关闭加载动画
wx.hideLoading()
}
})
})
}
3. 页面调用及使用
- 页面调用 通过
require()方法引用
- 定义方法 , 使用引用的方法即可
reqUser() {
request(接口路径, 'GET', 接口参数).then(res => {
console.log(res);
})
},