有很多小伙伴在前面的文章中评论,问我封装的
network
的代码,下面就详细写下。
一、在项目根目录新建network
文件夹,用于存放请求的文件。
二、在network
文件夹下,新建base.js
文件,用于存放域名和hearder
等统一的信息:
module.exports = {
baseUrl: 'https://www.xxxxx.com'
}
三、在network
文件夹下,新建network.js
文件,用于存放接口。以下以登录接口为例:
let { baseUrl } = require('./base.js')
export default class networkModule {
/**
* 登录
* @param {Function} callback
*/
static login(params, callback) {
var task = wx.request({
url: baseUrl + '/Api/login',
method: 'GET',
header: {
'content-type': 'application/json'
},
data: {
code: params.code,
},
success(res) {
//console.log(res)
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
callback(res.data)
},
fail(res) {
//console.log(res)
wx.showToast({
title: '服务器请求失败',
icon: 'none',
duration: 2000
});
callback({ status: 400, msg: '网络错误' }, res);
}
})
return task;
}
}
四、在需要用到network
的页面的js
文件中,引用上面的network.js
文件:
import NetWork from './network/network'
五、在需要用到network
的页面的js
文件中,如何使用上面封装的login
请求方法呢?看下面的例子:
getToken: function(){
//参数
let params = {
code: ''
}
//请求
NetWork.login(params, (res, err) => {
if (err || res.code === 0) {
return;
}
//返回成功的操作
this.token = res.token;
})
},
六、在发出请求前,也就是上面NetWork.login
方法执行之前,可以在页面增加loading
效果或者按钮置灰,防止用户的多次操作,导致多次触发请求。在接收到请求返回之后,也就是上面NetWork.login
方法执行返回后,按照需求需要,关闭loading
效果或者恢复按钮点击事件。我上面的代码没有具体说明,可以自己适当添加哦~
还有没考虑周全的地方,希望大家能评论指出