小程序请求封装

一、小程序请求封装思路

在小程序中，网络请求是一项十分常见的操作。为了避免代码重复且提高代码复用性，我们一般会封装一些网络请求的方法来进行调用。小程序请求封装通常分为两个方面：

第一，请求接口的封装，这个封装可以对请求进行统一管理，包括设置请求参数、返回值的转换以及错误处理。

第二，请求数据的封装，这个封装可以将不同类型的数据请求（例如文本、图片、视频等）封装进不同的方法中，从而实现网络请求的模块化编程。

二、小程序网络请求封装

网络请求是小程序开发中十分重要的一部分。小程序自带了wx.request()方法用于发送HTTP请求。通过对wx.request进行封装，我们可以实现更加优雅的网络请求。

以下是一个小程序网络请求的封装示例代码：

const BASE_URL = 'https://your_api_url.com/';

function request(params) {
  let { method = 'GET', url, data = {} } = params;

  return new Promise((resolve, reject) => {
    wx.request({
      method: method,
      url: BASE_URL + url,
      data: data,
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

该示例代码封装了一个request方法，其中包括HTTP请求的method、url和data三个参数。通过Promise和wx.request方法，我们可以实现异步请求和错误处理。

三、小程序请求接口封装

小程序请求接口的封装可以方便我们对接口进行统一管理，从而减少重复代码和提高代码复用性。以下是一个简单的请求接口封装示例：

const BASE_URL = 'https://your_api_url.com/';

function getUserInfo(params) {
  let { userId, token } = params;

  return request({
    url: '/user/info',
    data: {
      userId,
      token
    }
  })
}

function postUserInfo(params) {
  let { userId, token, userInfo } = params;

  return request({
    method: 'POST',
    url: '/user/info',
    data: {
      userId,
      token,
      userInfo
    }
  })
}

在该示例中，我们通过getUserInfo和postUserInfo方法分别对获取和提交用户信息的接口进行了封装。在每个方法中，我们都调用了request方法，并传递了URL和data参数。这样，我们就可以快速、简单地调用不同接口。

四、小程序数据请求封装

小程序数据请求封装可以使我们的代码更加结构化，使得不同类型的数据请求（例如文本、图片、视频等）具有不同的方法，从而更加方便地管理和维护。

以下是小程序数据请求封装的示例代码：

function getTextData(params) {
  let { url } = params;

  return request({
    url
  })
}

function getImageData(params) {
  let { url } = params;

  return new Promise((resolve, reject) => {
    wx.getImageInfo({
      src: url,
      success: res => {
        resolve(res.path)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

function getVideoData(params) {
  let { url } = params;

  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: url,
      success: res => {
        if (res.statusCode === 200) {
          const filePath = res.tempFilePath;
          resolve(filePath)
        } else {
          reject(res)
        }
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

在该示例中，我们分别封装了文本数据请求、图片数据请求、和视频数据请求。对于文本数据，我们直接调用了request方法；对于图片我们使用了wx.getImageInfo方法获取图片路径，对于视频我们使用了wx.downloadFile下载视频到本地。

五、封装微信小程序数据请求

为了保证小程序性能和用户体验，我们可以将微信小程序数据请求封装抽象为一个组件。该组件可以对网络请求进行一些全局管理，例如：自动添加请求头、自动处理错误、请求超时处理等。

下面是一个微信小程序数据请求封装示例代码：

const DEFAULT_TIMEOUT = 10000; // 默认请求超时时间

// 封装微信小程序request方法
function request(url, method, data, options = {}) {
  let { timeout = DEFAULT_TIMEOUT } = options;

  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      timeout,
      success: res => {
        resolve(res)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 对请求头进行处理，包括添加token的值
function addHeader(header) {
  let token = wx.getStorageSync('token');

  if (token) {
    header.token = token;
  }

  return header;
}

// 封装GET方法
function get(url, data = {}, options = {}) {
  let header = addHeader(options.header || {});
  options.header = header;

  return request(url, 'GET', data, options);
}

// 封装POST方法
function post(url, data = {}, options = {}) {
  let header = addHeader(options.header || {});
  header['content-type'] = 'application/x-www-form-urlencoded';
  options.header = header;

  return request(url, 'POST', data, options);
}

module.exports = {
  get,
  post
}

在该示例中，我们封装了微信小程序request方法，并添加了请求头的处理。同时，我们还封装了GET和POST方法，并在方法中添加了token的获取和设置content-type等处理，从而方便我们更加快捷地发送HTTP请求。

六、小程序封装请求

小程序封装请求是将常用请求封装为函数，然后在需要该请求时直接调用。这种方式可以避免重复代码，提高代码复用性，并且可以更加方便地调用。

以下是小程序封装请求的示例代码：

const BASE_URL = 'https://your_api_url.com/';

function requestApi(params) {
  let { url, data = {} } = params;
  let fullUrl = BASE_URL + url;

  return new Promise((resolve, reject) => 
    wx.request({
      url: fullUrl,
      data,
      header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  )
}

function login(data) {
  return requestApi({
    url: '/login',
    data
  })
}

function getUserInfo(data) {
  return requestApi({
    url: '/user/info',
    data
  })
}

module.exports = {
  login,
  getUserInfo
}

以上是小程序封装请求的一个示例。我们可以在login和getUserInfo方法中使用requestApi方法，并把请求的具体URL和参数传递进去。使用该方法的好处在于我们可以将不同的请求统一管理在同一个文件中，从而提高代码的可读性、可维护性和可扩展性。

七、微信小程序封装请求

怎么封装小程序的数据请求？通过函数和Promise进行封装，具体在函数中使用Promise返回封装好的数据请求，并解决请求延迟问题，保证数据的时效性和安全性，具体代码如下：

function wxRequest(url, data = {}, method = 'GET', header = {}) {
  wx.showLoading({ title: '加载中...', mask: true });
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      method,
      header,
      success: res => resolve(res),
      fail: res => reject(res),
      complete: () => wx.hideLoading()
    })
  })
}

module.exports = {
  wxRequest
}

通过以上代码，网络请求的方法进行了简单的封装。具体使用方法如下:

let http = require('http.js');
let url = 'https://xxx.com';
let data = { name: 'test', age: 20 };
http.wxRequest(url, data, 'POST').then(res => {
  console.log(res.data);
}).catch(error => {
  console.log(error);
})

八、如何封装小程序请求

如何封装小程序请求呢？一般有以下步骤：

第一步：封装request方法，定义需要返回的结果信息。

第二步：调用request方法，使用Promise对象封装返回结果。

第三步：调用promise对象then方法获取返回结果即可。

以下是一个简单的小程序请求封装的代码实例：

const API_BASE = 'https://api.xxx.com/';
const API = {
  banners: API_BASE + 'banners',
  articles: API_BASE + 'articles'
}

function request(url, method, data, header) {
  wx.showLoading({
    title: '加载中'
  })

  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      header: header,
      success: function(res) {
        resolve(res);
      },
      fail: function(error) {
        reject(error);
      },
      complete: function() {
        wx.hideLoading();
      }
    })
  });
}

function getBanners() {
  let url = API.banners;
  return request(url, 'GET', {});
}

function getArticles(page, limit) {
  let url = API.articles;
  let data = {
    page: page,
    limit: limit
  };
  return request(url, 'GET', data);
}

module.exports = {
  getBanners,
  getArticles
}

在该示例中，我们定义了常量API，包括请求的不同url；定义了request方法以发送HTTP请求；定义了getBanners、getArticles方法，这些方法调用request方法并通过返回Promise对象获得响应结果。