uniapp中如何实现网络请求封装

在UniApp开发中，网络请求是开发过程中不可缺少的一部分。我们经常需要从网络上获取数据以供应用程序使用。为了提高代码的可复用性，我们可以将网络请求进行封装。

1.网络请求的封装

在UniApp中，常用的网络请求方式有uni.request和uni.uploadFile。我们可以将这些请求封装成一个util.js工具文件，统一管理请求。

首先，在util.js文件中定义一个api的对象，存储接口地址：

export const api = {
  baseUrl: 'https://xxx.com/api',
  loginUrl: '/user/login',
  getUserInfoUrl: '/user/info',
  getGoodsListUrl: '/goods/list'
}

接着，我们可以定义一个request方法，用于进行请求：

/**
 * 请求方法封装
 * @param {string} url 接口地址
 * @param {string} method 请求方式
 * @param {object} data 请求参数
 * @param {function} successCallback 成功回调函数
 * @param {function} errorCallback 失败回调函数
 */
export function request(url, method, data, successCallback, errorCallback) {
  uni.request({
    url: api.baseUrl + url,
    method: method,
    data: data,
    header: {
      'content-type': 'application/json'
    },
    success: (res) => {
      if (res.statusCode === 200 && successCallback) {
        successCallback(res.data)
      } else if (res.statusCode === 401) {
        uni.showToast({
          title: '用户未登录',
          icon: 'none'
        })
        uni.navigateTo({
          url: '/pages/login/index'
        })
      } else {
        uni.showToast({
          title: '网络请求出错',
          icon: 'none'
        })
        if (errorCallback) {
          errorCallback(res)
        }
      }
    },
    fail: (error) => {
      uni.showToast({
        title: '网络请求出错',
        icon: 'none'
      })
      if (errorCallback) {
        errorCallback(error)
      }
    }
  })
}

在这个方法中，我们首先将请求的地址和参数封装成一个请求对象，并定义了请求成功和失败的回调函数。在请求成功时，我们判断状态码是否为200，如果是，调用成功回调函数返回数据；如果状态码为401，则提示用户未登录并跳转到登录页面；否则弹出网络请求出错的提示并调用失败回调函数。在请求出错时，我们同样弹出网络请求出错的提示并调用失败回调函数。

2.对于常用的请求进行再封装

在实际开发中，我们经常使用一些通用的接口，如登录、获取用户信息、获取商品列表等，我们可以将这些接口的请求进行再封装，以提高代码的复用性。

以登录为例，我们可以在util.js文件中定义一个login接口：

export function login(data, successCallback, errorCallback) {
  request(api.loginUrl, 'POST', data, successCallback, errorCallback)
}

在这个方法中，我们调用了之前定义的request方法，并将接口地址和请求方式封装在函数内部，只需传入数据和成功和失败的回调函数即可。

同样的，我们可以对其他常用接口进行封装，这些接口的请求在具体页面中只需调用对应的方法即可，如：

// 获取用户信息
export function getUserInfo(data, successCallback, errorCallback) {
  request(api.getUserInfoUrl, 'GET', data, successCallback, errorCallback)
}
// 获取商品列表
export function getGoodsList(data, successCallback, errorCallback) {
  request(api.getGoodsListUrl, 'GET', data, successCallback, errorCallback)
}

3.在页面中使用封装好的请求

在页面中使用我们封装好的请求非常简单。在需要使用请求的页面中，引入util.js文件，并调用对应的方法即可。

以获取商品列表为例，假设我们在商品列表页面中需要获取商品数据并展示在页面上，我们可以这样调用：

// goodsList.vue
import { getGoodsList } from '@/utils/util.js'
export default {
  data() {
    return {
      goodsList: []
    }
  },
  mounted() {
    this.getGoodsListData()
  },
  methods: {
    getGoodsListData() {
      const params = { page: 1, pageSize: 10 }
      getGoodsList(params, (res) => {
        this.goodsList = res.data
      }, (error) => {
        console.log(error)
      })
    }
  }
}

在这个例子中，我们在mounted生命周期中调用getGoodsListData方法，该方法调用getGoodsList方法并传入参数和请求成功和失败的回调函数。在请求成功的回调函数中，将返回的数据赋值给页面的数据goodsList。在请求失败的回调函数中，打印错误信息。

4.总结

本文介绍了UniApp中如何对网络请求进行封装，从而提高代码的复用性。我们定义了一个api对象用于存储接口地址，封装了一个request方法用于进行请求，并对常用的接口进行了再封装。在具体页面中，我们只需引入util.js文件并调用对应的方法即可完成网络请求。

网络请求的封装可以减少重复代码的编写，提高代码的可复用性，也便于统一管理接口地址和请求方式，从而提高开发效率。