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请求方式,以及请求拦截和响应拦截的使用方法。通过合理地封装请求方式,能够提高代码的复用性和可维护性,也能够方便开发者在项目中进行数据交互。