微信小程序HTTP请求从0到1封装
在微信小程序中,我们经常需要通过HTTP请求从后端获取数据。为了让代码更加规范、易于维护,我们可以把HTTP请求封装成一个类,然后在具体页面中调用这个类的方法来发送请求。接下来就让我们从0到1来学习微信小程序HTTP请求的封装方法。
准备工作
-
创建一个utils目录,并在该目录下创建一个http.js文件。
-
在app.js中引入封装好的http模块,并把它挂载到全局变量中。具体代码如下:
// app.js
const Http = require('./utils/http.js')
App({
globalData: {
http: new Http()
}
})
发送GET请求
我们首先来实现一个发送GET请求的方法。
class Http {
constructor() {
this.baseUrl = 'http://localhost:3000'
}
request(params) {
wx.request({
url: this.baseUrl + params.url,
method: params.method || 'GET',
data: params.data || {},
success: (res) => {
params.success && params.success(res.data)
},
fail: (err) => {
params.fail && params.fail(err)
}
})
}
get(url, data, success, fail) {
this.request({
url: url,
data: data,
success: success,
fail: fail
})
}
}
我们首先定义了一个Http类,它有一个baseUrl属性,用来存储API的基础URL。然后我们定义了一个request方法,它负责实际发送网络请求。最后我们定义了一个get方法,它调用了request方法,并传入参数。get方法的参数分别为url、data、success和fail,分别对应HTTP请求的URL、查询参数、成功回调和失败回调。
现在我们可以在具体的页面中使用get方法来发送GET请求。例如,我们要从服务器获取一些用户信息,代码如下:
const app = getApp()
Page({
onLoad() {
app.globalData.http.get('/users', {name: '张三'}, (res) => {
console.log(res)
}, (err) => {
console.error(err)
})
}
})
上面的代码中,我们首先用getApp()函数获取小程序实例,然后通过globalData获取到我们在app.js中挂在到全局变量上的http模块。接着我们就可以使用get方法来发送GET请求了。get方法的第一个参数为请求URL,第二个参数为查询参数,第三个参数为请求成功后的回调函数,第四个参数为请求失败后的回调函数。
发送POST请求
现在我们来实现一个发送POST请求的方法。
class Http {
// ...
post(url, data, success, fail) {
this.request({
url: url,
method: 'POST',
data: data,
success: success,
fail: fail
})
}
}
我们只需要在get方法的基础上稍做修改即可。我们只需要修改请求方法为 POST 并将 data 作为 POST 请求参数即可。例如,我们要向服务器上传一张图片,代码如下:
const app = getApp()
Page({
// ...
uploadImage() {
wx.chooseImage({
success: (res) => {
const tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: app.globalData.http.baseUrl + '/images',
filePath: tempFilePaths[0],
name: 'image',
success: (res) => {
console.log(res.data)
},
fail: (err) => {
console.error(err)
}
})
},
})
}
})
在上面的代码中,我们首先调用了wx.chooseImage函数,让用户选择一张图片。然后我们调用wx.uploadFile函数来上传图片。其中url参数为请求URL,filePath参数为图片路径,name参数为表单字段名。上传成功后,我们可以通过回调函数来处理服务器返回的数据。
结束语
以上就是微信小程序HTTP请求从0到1封装的完整攻略。通过封装HTTP请求,我们可以让代码更加规范、易于维护。希望本文能够对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序HTTP请求从0到1封装 - Python技术站