php代码如何封装小程序,微信小程序封装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 => {

//请求失败

})

}

})

}

})