微信小程序网络封装(简单高效)

什么是网络封装

网络封装是指在原有的网络请求框架基础上，通过封装来简化网络请求的操作。在实际开发中，封装网络请求可以减少代码的重复率，提高项目的可维护性、可读性、可扩展性等方面的优势。另外，依据业务需求，也可以实现网络请求的统一管理、统一处理等操作。

微信小程序网络请求模块

在微信小程序中，提供了基于Promise的网络请求API，使用起来非常简单。这个API是wx.request()，它可以发起一个HTTP请求，同时提供丰富的请求参数配置和响应数据处理功能。

wx.request({
url: 'http://example.com/some/path',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
}
})

上面的代码是一个简单的请求示例，其中包含了请求的url、请求参数、请求header、请求成功后的处理函数等信息，除了成功回调函数之外，还提供了fail和complete回调函数，来处理请求失败和请求完成之后的操作。

封装网络请求模块

在实际开发中，我们通常会使用封装过的网络请求模块来简化请求的操作。下面是一个简单的网络请求封装示例：

const request = (url, data = {}, method = 'GET') => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      success: (res) => {
        if (res.statusCode == 200) {
          resolve(res.data)
        } else {
          reject(res)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

export default request;

上述代码中，使用Promise封装了wx.request，同时提供了url、请求参数data、请求方法method作为参数，最后返回Promise对象，并在成功和失败回调函数中分别实现了resolve和reject。

实际使用时，可以直接引用封装的网络请求模块，而不需要在每个网络请求中重复编写网络请求的操作。例如：

import request from './utils/request';

request('https://example.com/api').then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});

上述代码中，使用import语法引入封装的网络请求模块，然后直接使用即可。在这个例子中，我们请求了一个url为https://example.com/api的接口，并将响应数据打印到控制台中。

示例一：封装GET请求

const get = (url, data = {}) => {
  return request(url, data, 'GET');
}

export default get;

上述代码中，我们封装了get请求，直接调用request方法，并将请求方法method设置为GET即可。使用时可以直接调用get方法来发起GET请求：

import get from './utils/get';

get('https://example.com/api?param=value').then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});

示例二：封装POST请求

const post = (url, data = {}) => {
  return request(url, data, 'POST');
}

export default post;

上述代码中，我们封装了post请求，同样是调用request方法，并将请求方法method设置为POST。使用时可以直接调用post方法来发起POST请求：

import post from './utils/post';

post('https://example.com/api', {param:value}).then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});