微信小程序已经成为了人们日常生活中必不可少的一部分。随着微信小程序平台的发展，开发者们也有了更多的可操作性。在这里，我们将探讨微信小程序网络请求的相关问题，为您提供一系列解决方案，帮助您提高代码复用。

一、问题

微信小程序网络请求常常遇到的问题之一就是请求方法的重复使用。当您有多个页面需要调用同一个接口时，如果每个页面都去写一次请求代码的话，岂不是太过于冗余了吗？这样一来，不仅增加了代码的复杂度，还浪费了代码书写的时间成本。因此，通用请求方法的封装是必不可少的。

二、解决方案

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超时时间的问题。

三、总结

通过以上的解决方案，我们可以将通用请求方法进行有效的封装和优化，大大提升代码的复用性和开发效率，从而更好地满足开发者对微信小程序网络请求的需求。当然，我们需要根据不同的业务场景，不断地探究可行的解决方案，不断提高代码的复用性和开发效率。