uniapp封装发送请求方式是什么

uniapp封装发送请求方式介绍

在使用uniapp开发项目时，经常需要和后端进行数据交互，而实现这种交互需要通过发送请求来获取或者提交数据。本文将介绍如何在uniapp中封装发送请求方式，方便开发者在项目中快速完成数据交互。

发送请求的常见方式

在进行数据交互时，我们通常会使用HTTP协议中的GET和POST方法。它们是向Web服务器发送请求常用的方式，GET是用于获取数据，而POST则是用于提交数据。

uniapp的网络请求封装

uniapp是一款跨平台的开发框架，因此开发者往往需要在多个平台上实现发送请求。为了方便开发者，uniapp集成了许多类似于axios的网络请求库，例如uni.request()和uni.uploadFile()等。

为了方便管理，我们通常会在项目中封装一个工具类，用于统一管理发送请求的方法。下面是一个示例代码：

export default {
  get(url, data = {}) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: url,
        data: data,
        header: {
          'Content-Type': 'application/json'
        },
        method: 'GET',
        success: res => {
          if (res.statusCode === 200) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        fail: err => {
          reject(err)
        }
      })
    })
  },
  post(url, data = {}) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: url,
        data: data,
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        method: 'POST',
        success: res => {
          if (res.statusCode === 200) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        fail: err => {
          reject(err)
        }
      })
    })
  }
}

这个工具类封装了发送GET和POST请求的方法，其中使用了Promise封装异步请求，方便使用async/await进行调用。同时，我们在header中设置了Content-Type，其中GET请求设置为application/json，而POST请求设置为application/x-www-form-urlencoded，这是常用的请求数据格式。如果需要使用其他格式，则需要修改Content-Type的值。

在使用封装好的工具类时，只需要引入该文件即可，例如：

import api from '@/utils/api.js'
api.get('/user/list', { page: 1, limit: 10 })
.then(res => {
  console.log(res)
})
.catch(err => {
  console.log(err)
})

请求拦截和响应拦截

在发送请求时，有时候我们需要对请求进行拦截，添加一些额外的信息，例如token等。此时，我们可以使用请求拦截器。

请求拦截器的使用方法如下：

uni.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  config.header.token = 'xxxx'
  return config
}, error => {
  // 请求错误时做些什么
  return Promise.reject(error)
})

在这个例子中，我们在请求拦截器中添加了token信息，使用config.header.token = 'xxxx'即可添加，其中xxxx为token的值。

除了请求拦截外，响应拦截同样也是非常重要的。比如，在接收到后端返回的数据时，我们需要判断该请求是否成功。这时，我们可以使用响应拦截器。

响应拦截器的使用方法如下：

uni.interceptors.response.use(response => {
  // 对响应数据做些什么
  if (response.statusCode !== 200) {
    return Promise.reject(response)
  } else {
    return response.data
  }
}, error => {
  // 请求错误时做些什么
  return Promise.reject(error)
})

在这个例子中，我们判断了响应的状态码，如果不是200，则认为请求失败。否则，我们则将返回的数据（response.data）进行返回。注意，在返回数据时，我们需要使用Promise.resolve()将其封装成一个Promise对象，以方便后面进行.then()或.catch()操作。

总结

本文介绍了uniapp中封装发送请求的方式，涵盖了常见的GET和POST请求方式，以及请求拦截和响应拦截的使用方法。通过合理地封装请求方式，能够提高代码的复用性和可维护性，也能够方便开发者在项目中进行数据交互。