UniApp中如何实现前后台通信-猿码集

1. 前后台通信概述

在编写UniApp应用时，前后端通信是不可避免的一个问题。前后台通信就是指前端和后端之间能够进行数据传输，让前端能够获取到后端的数据，实现数据的同步和更新。

在UniApp中，我们可以使用Ajax、websocket、fetch、uni.request等方法来实现前后台的通信。使用这些方法，我们可以通过发送请求和接收响应来进行数据传输，达到前后台之间的数据交互。

2. Uni.request方法

2.1 什么是uni.request方法

uni.request方法是UniApp封装的一个HTTP网络请求API，可用于跨域请求数据和上传文件等操作。uni.request方法是对wx.request方法的封装，并且增加了Promise风格的写法。

使用uni.request方法，我们可以轻松地向服务器发送请求，并获取服务器返回的数据。

2.2 uni.request方法的使用步骤

使用uni.request方法，需要先引入此方法。


import uniRequest from '@/common/request.js'
export default {
  data () {
    return {
    }
  },
  methods: {
    async test () {
      let res = await uniRequest({
        url: 'http://xxx.com/api/getData',
        data: {
          id: 1
        },
        header: {
          'Content-Type': 'application/json'
        }
      })
      console.log(res.data)
    }
  }
}

通过引入uniRequest来发送请求，其中uniRequest在封装请求头的时候可以在 baseURL 指定常用的域名和端口号，然后开发时我们只需要传入请求的路径即可，这个对于请求路径变动时是很友好的。

2.3 uni.request方法的参数说明

uni.request方法使用方式和wx.request一样，可以传入一个options对象，里面可以传入以下参数:

url - 要发送请求的url地址

method - 请求方法，默认是GET方法

header - 请求头，内容格式为键值对

data - 请求数据，内容格式为字符串或键值对

dataType - 如果设为json，会尝试对返回的内容做一次 JSON.parse 或者 JSON.stringify，否则原样返回，默认为 json

success - 成功回调函数

fail - 失败回调函数

complete - 完成回调函数

2.4 uni.request方法的返回值

uni.request方法会返回一个Promise对象，我们可以使用async和await关键字来获取到该Promise对象返回的数据，具体返回值格式如下：

data - 服务器返回的数据

statusCode - 状态码

header - 响应头

3. 使用WebSocket实现前后台通信

3.1 什么是WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的网络协议，它既可以被用于浏览器和服务器之间的通信，也可以被用于任何其他需要低延迟、高速传输数据的场合。

相比较起HTTP这种方式，WebSocket通信更加方便、快捷。HTTP协议每次请求都需要建立连接，完成数据传输后再断开连接，这样每次建立连接的时候都需要完成TCP的三次握手等写操作，耗费了大量时间和资源。而WebSocket协议则是连续的数据通信，可以保持客户端和服务器之间的长连接，同时还可以通过一条TCP连接发送多重数据。

3.2 使用WebSocket实现前后台的通信

要使用WebSocket，我们需要在客户端创建WebSocket实例，并且指定服务器的IP地址和端口号，客户端会自动与服务器建立连接。建立连接后，客户端可以向服务器发送消息，服务器也可以向客户端发送消息。

在UniApp中实现WebSocket通信，我们可以使用uni.createSocketContext()方法来创建WebSocket实例，方法语法如下：


const socket = uni.createSocketContext('ws://localhost:8080')
socket.onOpen((res) => {
  console.log('WebSocket连接已打开！')
})
socket.onError((res) => {
  console.log('WebSocket连接打开失败！')
})
socket.onMessage((res) => {
  console.log(`接收到WebSocket消息：${res.data}`)
})
socket.send({
  data: 'WebSocket发送消息'
})

使用uni.createSocketContext()创建WebSocket实例之后，我们可以通过onOpen、onError、onMessage等方法来监听WebSocket连接状态，当连接打开、连接失败和接收到消息时，相应的回调函数就会被触发。

4. 结语

前后台通信在UniApp应用中是很重要的一部分，它实现了前后端之间的数据交互，让应用展现出更强大的功能和更好的用户体验。在UniApp中，我们可以使用Ajax、websocket、fetch、uni.request等方法来实现前后台的通信。其中，uni.request方法封装了wx.request方法，提供了Promise风格的写法，而WebSocket协议则可以保持长连接，提高数据传输速度。

UniApp中如何实现前后台通信