vue发送websocket请求和http post请求的实例代码

我来帮你讲解一下。

发送websocket请求

在Vue中，我们可以使用vue-websocket库来实现对Websocket的使用。首先，在项目中安装vue-websocket库：

npm install vue-websocket --save

接下来，在Vue实例中，我们需要使用mixins来引入websocket相关配置，并且在钩子函数中绑定事件和发送消息。示例代码如下：

// 引入websocket和相关配置
import VueWebsocket from 'vue-websocket';

Vue.use(VueWebsocket, 'ws://localhost:8080', {
  reconnection: false
});

export default {
  mixins: [VueWebsocket.mixin],
  data() {
    return {
      message: ''
    }
  },
  created() {
    // 绑定事件
    this.$options.sockets.message = (data) => {
      console.log(data);
      this.message = data;
    }
  },
  methods: {
    sendMessage() {
      // 发送消息
      this.$socket.send('Hello, world!');
    }
  }
}

在上面的代码中，我们使用了Vue.use()语法来安装vue-websocket，并且传入了websocket相关的配置。通过mixins引入VueWebsocket.mixin，实现在组件中监听并且发送消息。在created()钩子函数中，我们绑定了message事件，当有消息发送过来时，会触发相关函数并且在console中打印出来。在sendMessage()方法中，我们调用$socket.send()发送消息。注意，这里默认是使用的字符串类型，如果需要发送JSON对象，需要使用JSON.stringify()转化为字符串。

发送HTTP POST请求

在Vue中，我们可以使用axios库来发送HTTP请求。首先，在项目中安装axios库：

npm install axios --save

接下来，在Vue实例中，我们使用axios发送HTTP POST请求。示例代码如下：

import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async postData() {
      try {
        const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
          title: 'foo',
          body: 'bar',
          userId: 1
        });
        console.log(response.data);
        this.message = response.data;
      } catch (error) {
        console.error(error);
        this.message = error.message;
      }
    }
  }
}

在上面的代码中，我们使用了axios.post()发送HTTP POST请求，并且传入了一个JSON对象作为请求体。在调用时，使用了async-await语法进行异步调用，并且使用try-catch语法捕获错误，并做出相应的处理。在成功时，我们打印出response.data，并且将其赋值给Vue实例中的message变量，在页面中渲染出来。在失败时，我们捕获错误，并且将错误信息赋值给message变量，同样在页面中渲染出来。

以上就是Vue发送WebSocket请求和HTTP POST请求的实例代码，希望可以帮助到你。