原生小程序如何封装请求，优雅地调用接口？-猿码集

1. 前言

小程序的特点就是轻量、快速，但是这也带来了一些限制，例如HTTP请求不支持CORS、不支持websocket等等。因此，在小程序中封装请求成为了一个很有必要的事情。这篇文章旨在分享如何在原生小程序中进行请求封装，并实现优雅调用接口。

2. 封装请求

封装请求的主要目的就是让请求调用更加方便，同时保证代码的可扩展性。

2.1 封装GET请求

GET请求是一个基本的请求方式，我们可以将其封装成一个promise函数，示例代码如下：


/**
 * 封装GET请求
 * @param {string} url - 请求URL
 * @param {object} data - 请求参数
 * @returns {Promise}
 */
function getRequest(url, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: 'GET',
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

这样，在页面中发起GET请求时，只需要调用该函数即可，示例代码如下：


getRequest('https://api.example.com/data', { page: 1, size: 10 })
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

2.2 封装POST请求

封装POST请求时，需要注意请求头的设置，示例代码如下：


/**
 * 封装POST请求
 * @param {string} url - 请求URL
 * @param {object} data - 请求参数
 * @returns {Promise}
 */
function postRequest(url, data) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

同样，在页面中发起POST请求时，只需要调用该函数即可，示例代码如下：


postRequest('https://api.example.com/user', { username: 'example', password: 'example123' })
  .then(data => {
    console.log(data)
  })
  .catch(err => {
    console.error(err)
  })

3. 优雅的调用接口

在实际开发中，除了简单的请求外，我们经常需要在不同的页面中调用同一个接口。此时，我们可以将接口封装成一个函数，并将其放在一个单独的文件中，这样就能够实现接口的复用。下面是一个示例：

3.1 定义接口函数

首先，在一个单独的JavaScript文件中，定义接口函数：


/**
 * 获取用户信息接口
 * @param {string} userId - 用户ID
 * @returns {Promise}
 */
function getUserInfo(userId) {
  return getRequest('https://api.example.com/user/' + userId, {})
}
 
module.exports = {
  getUserInfo: getUserInfo
}

3.2 在页面中调用接口函数

然后，在需要调用接口的页面中，引入该文件，并调用接口函数：


const api = require('../../utils/api.js')
 
Page({
  data: {
    userId: '123'
  },
  onLoad() {
    api.getUserInfo(this.data.userId)
      .then(data => {
        console.log(data)
      })
      .catch(err => {
        console.error(err)
      })
  }
})

这样，我们就能够实现接口的复用，同时在页面中以一种优雅的方式调用接口。

4. 封装loading效果

在实际开发中，我们经常需要在页面中进行异步操作，这时可以使用loading效果来提示用户，示例代码如下：

4.1 定义showLoading函数

首先，我们定义一个showLoading函数，用来显示loading效果：


function showLoading() {
  wx.showLoading({
    title: '加载中'
  })
}

4.2 定义hideLoading函数

接着，我们定义一个hideLoading函数，用来隐藏loading效果：


function hideLoading() {
  wx.hideLoading()
}

4.3 在接口函数中使用showLoading和hideLoading函数

最后，在我们的接口函数中，使用showLoading和hideLoading函数来展示和隐藏loading效果，示例代码如下：


/**
 * 获取用户信息接口
 * @param {string} userId - 用户ID
 * @returns {Promise}
 */
function getUserInfo(userId) {
  showLoading()
  return getRequest('https://api.example.com/user/' + userId, {})
    .then(data => {
      hideLoading()
      return data
    })
    .catch(err => {
      hideLoading()
      throw err
    })
}

这样，在调用接口时，loading效果就会自动显示和隐藏了。同时，在页面中进行异步操作时，也可以使用showLoading和hideLoading函数来提示用户。

5. 总结

本文介绍了如何在原生小程序中封装请求，并实现优雅地调用接口。在封装请求中，我们定义了getRequest和postRequest函数，用来封装GET和POST请求。在调用接口函数时，我们可以将其放在一个单独的文件中，实现接口的复用，并以一种优雅的方式调用接口。最后，我们介绍了如何在页面中使用loading效果来提示用户。这些封装技巧能够让我们的代码更加优雅、可读、可扩展。

原生小程序如何封装请求，优雅地调用接口？