小程序开发之request请求封装
.env定义环境
- 在目录中定义env.js文件定义api环境 如下: http/env.js
module.exports = {
// 开发版
develop: {
baseUrl: 'https://developers.com/h5',
},
// 体验版
trial: {
baseUrl: 'https://developers.com/h5-trial',
},
// 正式版
release: {
baseUrl: 'https://developers.com/h5-release',
},
}
封装request请求
- 在http文件夹下封装request请求 如下: http/request.js
module.exports = {
request: function (url, data = {}, method = 'GET') {
// 此处baseUrl需要从定义的env.js文件中import
let fullUrl = `${baseUrl}${url}`;
wx.showLoading({
title: '加载中',
})
// 使用Promise封装一层
return new Promise((resolve, reject) => {
wx.request({
url: fullUrl,
method,
data,
header: {
'Content-type': 'application/json'
},
// 成功的回调函数
success(res) {
if (res.statusCode === 200) {
// 将response的数据resolve出去
resolve(res.data)
wx.hideLoading()
} else {
wx.showToast({
title: '请求失败',
icon: 'error'
})
reject(res);
}
},
fail(error) {
wx.showToast({
title: '请求失败',
icon: 'error'
})
reject(error);
}
})
})
},
}
- 这样就完成了 request的封装,接下来就是请求调用了
- 如果此处有更多的statusCode需要处理,只需要在判断中进行或者switch写就可以了
定义项目的请求分类文件和使用方法 http/index.js
const { request } = require('../http/request');
module.exports = {
/**
* 定义了微信授权登录接口
* request (请求路径,请求参数)
*/
api_userLogin: (params) => request('/wx/code', {
...params
})
- 如此请求就定义完整了,如果请求过多,可以将请求分类存放,如用户信息相关,业务相关等。
使用
const { api_userLogin } = require("../../http/index");
// 调取用户信息
getUserInfo(options) {
// 简单的调用方式,此处应先调用wx接口获取code
var params = { code }
return api_userLogin(params)
}
- 好了,到这里就都结束了,希望可以帮助到大家,有问题的地方也请大家多多指正!