如何在uniapp项目中进行网络请求方法的封装

1. 网络请求方法的封装

在uniapp项目中，我们经常会用到网络请求，在不同组件或页面中都会写网络请求相关的代码，这样会导致项目编写和维护的难度增加，因此，将网络请求方法进行封装，可以大大提高开发效率，降低代码维护难度。

1.1 为什么要封装网络请求方法？

封装网络请求方法可以起到以下几个好处：

提高代码的复用性

降低项目维护难度

提高开发效率，减少代码量

1.2 如何封装网络请求方法？

封装网络请求方法可以使用uniapp自带的uni.request方法或第三方库axios来实现。

2. uni.request方法基础使用

uni.request方法是uniapp封装的网络请求方法，该方法提供了发送get、post等请求的功能，我们可以在项目中直接使用，具体的使用方法如下：

  uni.request({
    url: 'https://www.example.com/api',
    data:{
      name:'Jason',
      age:18
    },
    header:{
      'content-type':'application/json'
    },
    method:'GET',
    success(res) {
      console.log(res.data)
    },
    fail(err) {
      console.log(err)
    }
  })

uni.request方法的使用比较简单，我们只需要传入url、data、header、method等参数即可。其中，url代表请求地址，data代表请求参数，header代表请求头信息，method代表请求方法。

2.1 如何封装uni.request方法？

uni.request方法在应用中会被多次调用，直接在需要使用的地方写请求代码会导致代码重复和耦合性过强，不方便维护。因此，我们需要将它封装起来，引用时调用封装后的方法即可。

我们可以在utils文件夹下新建request.js文件，以封装请求方法对象。以下是一个简单的封装示例：

  const baseUrl = 'https://www.example.com/api'
  const request = (url,data={},method='GET',header={'content-type':'application/json'}) => {
    return new Promise((resolve,reject) => {
      uni.request({
        url: baseUrl+url,
        data,
        method,
        header,
        success(res) {
          resolve(res.data)
        },
        fail(err) {
          reject(err)
        }
      })
    })
  }
  export default request

以上代码就是一个基于uni.request的封装示例，我们使用了ES6的语法，通过Promise对象对请求进行了封装。在调用该请求时，只需传入请求地址、参数和请求方法即可实现网络请求功能。具体使用如下：

  import request from '/utils/request'
  request('/login',{username:'Jason',password:'123456'},'POST')
    .then(res => {
      console.log(res)
    })
    .catch(err => {
      console.log(err)
    })

3. axios基础使用

axios是一个基于promise的HTTP库，可以用在浏览器端和node.js服务器端。在vue项目中，我们可以通过vue-axios插件使用它，但在uniapp中，我们需要手动引入axios。

3.1 axios的安装

我们可以通过npm安装axios：

npm install axios --save

3.2 axios的基础使用

在main.js中引入axios模块：

import axios from 'axios'
Vue.prototype.$axios = axios

然后在需要使用axios的地方调用即可：

axios.get('/api',{
  params:{
    id:1
  }
}).then(res => console.log(res))
.catch(err => console.log(err))

这里我们调用了get方法，并传入了请求地址和请求参数，成功时输出响应体数据，失败时输出错误信息。需要注意的是，axios是基于Promise的异步请求，需要通过then方法或catch方法来处理请求响应和错误信息。

3.3 如何封装axios？

为了方便复用，在项目中我们需要对axios进行封装。我们可以在utils文件夹下新建request.js文件，以封装请求方法对象。以下是一个简单的封装示例：

import axios from 'axios'
const baseUrl = 'https://www.example.com/api'
const service = axios.create({
    baseURL: baseUrl,
    timeout: 5000
})
// 封装get请求
export const getRequest = (url, params={}) => {
    return service({
        url: url,
        method: 'get',
        params: params
    })
}
// 封装post请求
export const postRequest = (url, data={}) => {
    return service({
        url: url,
        method: 'post',
        data: data
    })
}
// 封装put请求
export const putRequest = (url, data={}) => {
    return service({
        url: url,
        method: 'put',
        data: data
    })
}
// 封装delete请求
export const deleteRequest = (url, params={}) => {
    return service({
        url: url,
        method: 'delete',
        params: params
    })
}

以上代码就是一个基于axios的封装示例，我们可以根据需求增加其他方法的封装。在调用该请求时，只需调用相应的方法即可实现网络请求功能。具体使用如下：

import {getRequest,postRequest} from '/utils/request'
getRequest('/list',{
  page:1,
  size:10
}).then(res => console.log(res))
.catch(err => console.log(err))
postRequest('/add',{
  name:'Jason',
  age:18
}).then(res => console.log(res))
.catch(err => console.log(err))

4. 总结

网络请求是uniapp项目中的重要部分，通过对网络请求方法进行封装，可以提高代码复用性和维护性，同时也可以提高开发效率。我们可以使用uni.request或axios来实现网络请求的功能，并根据需要进行封装，以便复用。

在使用uni.request或axios时，需要注意参数的传递和Promise对象的使用，以及错误处理机制。在实际应用中，还需要考虑跨域问题和安全性问题。