Vue发送POST请求

一、vue发送POST请求参数

在Vue中，发送POST请求需要注意以下3个方面：

1、Vue需要使用axios库来进行网络请求，需要先引入：

import axios from 'axios'

2、Vue发送POST请求时需要传递参数，可以在axios中使用data选项进行传参:

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

3、在服务器端接收参数时，可以使用body-parser模块来解析POST请求体，需要先引入：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

二、vue发送POST请求如何传两个参数

当需要在Vue中同时传递两个参数时，可以在axios中使用params选项进行传参：

axios({
  method: 'post',
  url: '/api/user',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  params: {
    id: 123
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

三、vue发送POST请求报错

当在Vue中使用axios发送POST请求时，可能会出现报错的情况。常见的错误有以下两种：

1、CORS问题：跨域资源共享问题，需要在服务器端设置CORS规则，允许跨域请求。

2、404报错：可能是因为请求的API不存在或者请求的路径错误，可以检查一下请求的URL和API是否对应。

四、vue中发送POST请求

在Vue中，发送POST请求的步骤如下：

1、引入axios库：

import axios from 'axios'

2、使用axios发送POST请求：

axios.post('/api/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

五、发送POST请求

除了使用axios发送POST请求外，Vue还可以使用Vue Resource和XMLHttpRequest等方式发送POST请求。

1、Vue Resource发送POST请求：

this.$http.post('/api/user', {firstName: 'John', lastName: 'Doe'}).then(response => {
  console.log(response.body);
}, response => {
  console.log(response.body);
});

2、XMLHttpRequest发送POST请求：

var xhr = new XMLHttpRequest()
xhr.open('POST', '/api/user');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
xhr.send(JSON.stringify({firstName: 'John', lastName: 'Doe'}));

六、vue发送ajax请求

由于Vue本身并不提供ajax功能，因此需要引入第三方库来进行ajax请求。常用的ajax库有jQuery、axios、Vue Resource等。

以axios为例，在Vue中发送ajax请求的步骤如下：

1、引入axios：

import axios from 'axios'

2、使用axios发送ajax请求：

axios.get('/api/user').then(response => {
  console.log(response.data)
})
.catch(error => {
  console.log(error)
})

七、vue发送http请求

除了使用ajax请求外，Vue还可以使用fetch API来发送HTTP请求。fetch是一种新的网络请求API，可以替代XMLHttpRequest。

在Vue中使用fetch发送HTTP请求的步骤如下：

1、使用fetch发送HTTP请求：

fetch('/api/user')
.then(response => {
  return response.json()
})
.then(data => {
  console.log(data)
})
.catch(error => {
  console.log(error)
})

2、需要注意的是，fetch返回的是一个Promise对象，需要使用then方法来处理请求结果。