基于vue 添加axios组件,解决post传参数为null的问题

为了解决”post传参数为null的问题”，我们需要基于vue添加axios组件，并在axios中进行相关配置。具体的攻略步骤如下：

步骤1：安装axios

我们可以使用npm或yarn等工具来安装axios，具体的命令如下：

npm install axios --save 

或者：

yarn add axios

步骤2：创建axios配置文件

在项目的src目录下创建一个名为 http.js 的文件，该文件将用于配置axios。在文件中添加以下代码：

import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: '', // api的base_url
  timeout: 5000, // 请求超时时间
  withCredentials: true, // 允许携带cookie
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' // 构造请求头
  }
})

// request拦截器
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  response => {
    // do something with response data
    return response.data
  },
  error => {
    // do something with response error
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

export default service

上述代码实现了创建axios实例和设置拦截器的功能。其中请求头的内容根据实际情况修改即可。

步骤3：使用axios发送post请求

在vue组件中，我们可以使用如下代码来发送post请求：

const data = { // 请求参数
  name: 'John',
  age: 20,
  sex: 'male'
}
this.$http.post('/api/user', data).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

具体的示例请看下面的例子。

示例1：

我们假设我们的后端提供了一个 /api/user 接口来添加用户。我们发送的数据为一个用户对象，该对象包含了用户名、年龄和性别三个字段。vue组件代码如下：

<template>
  <div>
    <input type="text" v-model="name" placeholder="请输入用户名">
    <input type="text" v-model="age" placeholder="请输入年龄">
    <input type="text" v-model="sex" placeholder="请输入性别">
    <button @click="addUser()">添加用户</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      age: '',
      sex: ''
    }
  },
  methods: {
    addUser () {
      const data = {
        name: this.name,
        age: this.age,
        sex: this.sex
      }
      this.$http.post('/api/user', data).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

示例2：

我们继续假设我们的后端提供了一个 /api/login 接口来进行登录操作。我们发送的数据为一个登录表单对象，该对象包含了用户名和密码两个字段。vue组件代码如下：

<template>
  <div>
    <input type="text" v-model="username" placeholder="请输入用户名">
    <input type="text" v-model="password" placeholder="请输入密码">
    <button @click="login()">登录</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      const data = {
        username: this.username,
        password: this.password
      }
      this.$http.post('/api/login', data).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

执行上述示例代码，即可通过axios发送post请求，并解决传参数为null的问题。