微信小程序已经成为了人们日常生活中必不可少的一部分。随着微信小程序平台的发展，开发者们也有了更多的可操作性。在这里，我们将探讨微信小程序网络请求的相关问题，为您提供一系列解决方案，帮助您提高代码复用。
一、问题
微信小程序网络请求常常遇到的问题之一就是请求方法的重复使用。当您有多个页面需要调用同一个接口时，如果每个页面都去写一次请求代码的话，岂不是太过于冗余了吗？这样一来，不仅增加了代码的复杂度，还浪费了代码书写的时间成本。因此，通用请求方法的封装是必不可少的。
二、解决方案
1.统一请求方法封装
在微信小程序中，网络请求可以通过 wx.request() 方法进行调用。为了提高代码复用性，我们可以使用封装通用请求方法的方式，将请求代码统一管理起来。例如：
```
//app.js中定义请求方法
App({
globalData: {},
apiUrl: 'https://www.example.com',
request(url, data = {}, method = 'GET') {
const token = wx.getStorageSync('token');
return new Promise((resolve, reject) => {
wx.request({
url: `${this.apiUrl}${url}`,
method,
data,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Bearer ${token}`
},
success: (res) => {
resolve(res.data);
},
fail: (err) => {
reject(err);
}
})
})
}
})
```
这里我们将请求方法封装在了 app.js 中，并设置了全局的 apiUrl 和 header 参数，让所有的请求方法都可以使用。
2.调用请求方法
当我们需要在单个页面中调用请求方法时，只需引用 app.js 文件中定义的全局函数，而不用在每个页面中分别书写请求代码。例如：
```
//index.js中调用请求方法
const app = getApp();
Page({
data: {
list: []
},
onLoad() {
this.getList();
},
getList() {
app.request('/list').then(res => {
this.setData({
list: res,
})
})
}
})
```
这里我们在 index.js 中直接使用 app.js 文件中定义的请求方法，同时也得到了 app.js 中设置的全局 apiUrl 和 header 参数。
3.传递参数
在封装通用请求方法时，我们也需要考虑到一些特殊情况，例如有多个参数需要传递时。在这种情况下，可以使用 ES6 的解构赋值来传递参数，例如：
```
//app.js中定义请求方法
request(url, { data, method = 'GET', header } = {}) {}
//index.js中调用请求方法
app.request('/list', {
data: {
page: 1,
limit: 10
},
header: {
'Content-Type': 'application/json',
}
})
```
在这里，我们对 data、method 和 header 这三个参数使用了解构赋值，并给了默认值。在调用请求方法时，我们可以根据参数需要直接传递 {}
4.错误处理
在实际开发中，网络请求不可避免会出现错误，例如网络故障等等。因此，在请求方法中，我们需要加入错误处理的逻辑，例如：
```
//app.js中定义请求方法
request(url, { data, method = 'GET', header } = {}) {
const token = wx.getStorageSync('token');
return new Promise((resolve, reject) => {
wx.request({
url: `${this.apiUrl}${url}`,
method,
data,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Bearer ${token}`,
...header,
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
})
})
}
//index.js中调用请求方法
app.request('/list').then(res => {
this.setData({
list: res,
})
}).catch(err => {
console.error(err);
})
```
在这里，我们加入了错误处理逻辑，如果请求成功，则返回请求结果。而如果请求失败，则会进入 catch 块中处理错误逻辑。
5.优化请求方法
在某些场景下，我们需要进行数据缓存。例如我们需要展示的列表数据，并不是实时获取的。此时，我们可以进行数据缓存优化，例如：
```
//app.js中定义请求方法
request(url, { data, method = 'GET', header } = {}, cache = false) {
const token = wx.getStorageSync('token');
const cacheKey = `${url}-${JSON.stringify(data)}`;
if (cache && wx.getStorageSync(cacheKey)) {
return Promise.resolve(wx.getStorageSync(cacheKey));
}
return new Promise((resolve, reject) => {
wx.request({
url: `${this.apiUrl}${url}`,
method,
data,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': `Bearer ${token}`,
...header,
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res);
}
},
fail: (err) => {
reject(err);
}
})
}).then(res => {
wx.setStorageSync(cacheKey, res);
return res;
})
}
//index.js中调用请求方法
app.request('/list', {}, true);
```
在这里，我们添加了 cache 参数控制是否开启缓存，并使用 wx.setStorageSync() 和 wx.getStorageSync() 实现数据缓存。当然，这种方式需要考虑到cache超时时间的问题。
三、总结
通过以上的解决方案，我们可以将通用请求方法进行有效的封装和优化，大大提升代码的复用性和开发效率，从而更好地满足开发者对微信小程序网络请求的需求。当然，我们需要根据不同的业务场景，不断地探究可行的解决方案，不断提高代码的复用性和开发效率。
