vue封装axios传递json

Vue是一种流行的前端框架，它提供了许多有用的工具和组件，方便我们开发高质量的Web应用程序。其中之一就是Axios，Axios是一个流行的基于Promise的HTTP客户端，它可以在浏览器和Node.js中使用。通过它，开发者可以方便地发送HTTP请求，也可以自定义请求头部信息、请求数据等。

Vue封装Axios能够更好的管理和维护我们的代码，使得发起HTTP请求更加便捷和方便。对于传递JSON数据，我们一般可以按照如下步骤进行：

1. 在Vue项目中安装axios

npm install axios --save

2. 封装axios

在项目中新建一个api.js文件，在其中封装axios。目的是为了让发送请求时可以直接使用该文件中定义的函数，在需要时只需要调用，并可以设置统一的请求头部信息等，如下所示：

import axios from 'axios'

const baseURL = 'http://localhost:3000'

export default {
  post(url, data) {
    return axios({
      method: 'post',
      baseURL: baseURL,
      url,
      data: data,
      withCredentials: true, //表示跨域请求时是否需要使用凭证
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
        //可以根据需要设置请求头部信息
      }
    })
  }
}

在这里我们将post方法暴露出来，方便其他地方使用，其中需要传入两个参数'url'和'data'。url表示请求的地址，data则表示请求的数据，这里我们设置的数据为一个JSON对象。

3. 发送请求

在调用API的地方，可以直接使用封装好的axios方法进行发送请求，如下：

import api from './api.js'

api.post('/login', {
  username: 'admin',
  password: 'admin123'
}).then(res => {
  //处理请求获取到的数据
})

通过封装axios，我们可以统一管理所有的API请求，并进行相应的配置，方便我们进行开发。同时，可以有效规避代码冗余和错误的出现，提高代码质量和开发效率。