如何封装uniapp的request

1. 背景

在开发uniapp的过程中，我们经常需要发送网络请求获取各种数据，uniapp提供了一个内置的网络请求方法uni.request，但是使用起来比较繁琐，需要编写大量的重复代码，所以我们可以考虑封装一下uni.request方法，简化请求过程，提高开发效率。

2. 封装过程

2.1 定义封装方法

我们可以定义一个方法，命名为request，用来发送网络请求，该方法封装了uni.request方法，具体实现如下所示：

function request(options) {
  return new Promise((resolve, reject) => {
    uni.request({
      url: options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: options.header || {},
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

在上面的代码中，我们使用了es6的promise语法来处理异步请求，当请求成功时，我们使用resolve方法将结果返回，当请求失败时，我们使用reject方法返回错误信息。

2.2 使用封装方法

使用封装方法非常简单，只需要传入一个对象包含请求相关的参数即可。例如：

request({
  url: 'https://www.example.com/api/users',
  method: 'POST',
  data: {
    name: '张三',
    age: 18
  },
  header: {
    'content-type': 'application/json'
  }
}).then(result => {
  console.log(result)
}).catch(error => {
  console.log(error)
})

在上面的代码中，我们使用了request方法发送了一个post请求，将数据以json格式发送到服务器。

3. 封装优化

3.1 默认配置

在实际开发中，我们可能会多次调用同一个接口，如果每次都手动配置一遍请求的参数是非常麻烦的，所以我们可以设置一些默认参数，例如接口域名、请求方式、请求头等，这样在调用接口时只需要传入部分参数即可。

function request(options) {
  const baseUrl = 'https://www.example.com/api'
  const defaultOptions = {
    url: '',
    method: 'GET',
    data: {},
    header: {
      'content-type': 'application/json'
    }
  }
  options = Object.assign({}, defaultOptions, options)
  options.url = baseUrl + options.url
  // ...
}

在上面的代码中，我们定义了一个baseUrl常量，用来存放接口的域名。同时，我们定义了一个defaultOptions对象，其中包含了一些默认的请求参数，例如请求方式为GET、请求头为json格式。

我们使用Object.assign方法将defaultOptions和options合并，以options为主，并将合并后的结果重新赋值给options，这样我们就得到了一个完整的请求参数。

最后，我们将请求的url拼接上baseUrl，得到最终的请求地址。

3.2 错误处理

在发送网络请求时，可能会发生一些错误，例如网络不可用、请求超时等，需要对这些错误进行处理，以保证程序在出错时能够恰当地响应。

我们可以在request方法中添加一个错误处理函数，用来捕获请求过程中的错误信息，并返回对应的错误提示。例如：

function request(options) {
  // ...
  return new Promise((resolve, reject) => {
    uni.request({
      // ...
      fail: err => {
        uni.hideLoading() // 隐藏loading
        uni.showToast({
          title: '网络错误，请稍后重试',
          icon: 'none'
        })
        reject(err)
      }
    })
  })
}

在上面的代码中，在请求失败时，我们使用uni.hideLoading方法隐藏loading提示，并使用uni.showToast方法显示一个错误提示框，提示用户网络错误。最后，我们使用reject方法将错误信息返回。

4. 总结

通过封装uniapp的request方法，我们可以大大简化网络请求的过程，提高开发效率。在封装过程中，我们使用了promise语法、默认配置、错误处理等技术，让请求代码更加简洁、清晰、易于维护。