微信小程序封装request请求
前言
在小程序(其他)开发过程中,我们会遇到很多请求,如果每次都去写一遍
wx.request({
url: 'test.php', // 仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
},
fail(err){
console.log(err)
}})烦不烦,气不气
尤其是同一个接口好几个地方都要使用,有一点变动就需要全部找出来一个一个改
很不方便维护
所以我们就封装一下,统一管理吧~
准备
在开始之前你需要了解
1.wx.request戳我了解
2.Promise戳我了解
封装
准备完成后开始撸代码
首先我们看下request的基本参数
url(请求地址)
一般url都是有一个固定前缀(域名),只是后面不同
例如:
https://some-domain.com/api/test1 https://some-domain.com/api/test2 https://some-domain.com/api/test3 https://some-domain.com/api/test4...
所以我们设置一个全局常量baseUrl用来存储前缀
const baseUrl='https://some-domain.com/api/'
2.method(HTTP 请求方法)
这里不多做解释
const GET = 'GET';const POST = 'POST';const PUT = 'PUT';const FORM = 'FORM';const DELETE = 'DELETE';
3.header(请求header)
header的话根据method设置就行了,默认
header = {
'content-type': 'application/json',
};4.data(参数)
get请求直接传就可以了
post请求JSON.stringify(data)一下
封装代码
const GET = 'GET';const POST = 'POST';const PUT = 'PUT';const FORM = 'FORM';const DELETE = 'DELETE';const baseURL = 'https://some-domain.com/api/';function request(method, url, data) {
return new Promise(function(resolve, reject) {
let header = {
'content-type': 'application/json',
};
wx.request({
url: baseURL + url,
method: method,
data: method === POST ? JSON.stringify(data) : data,
header: header,
success(res) {
//请求成功
//判断状态码---errCode状态根据后端定义来判断
if (res.data.errCode == 0) {
resolve(res);
} else {
//其他异常
reject('运行时错误,请稍后再试');
}
},
fail(err) {
//请求失败
reject(err)
}
})
})}已经等封装完成,那么该如何使用呢?
1.在小程序util文件夹下新建api.js,并将上述代码放进去
然后创建请求,并导出
//衔接上面代码const API = {
getOpenid: (data) => request(GET, `jsapi/mini?jsCode=${data}`),};module.exports = {
API: API}2.这里我么以获取openid接口为例
在.js文件里引入api.js下的API
const $api = require('../../utils/api.js').API;Page({
data: {},
onLoad: function (options) {
wx.login({
success:res=> {
// 调用接口获取openid
$api.getOpenid(res.code)
.then(res => {
//请求成功
})
.catch(err => {
//请求失败
})
}
})
}})