vue axios请求接口封装

Vue中使用axios发送请求时，可以将请求接口进行封装，以提高代码的可维护性和复用性。

首先，在Vue项目中安装Axios库：

npm install axios --save

然后，在需要使用请求接口的地方引入axios：

import axios from 'axios'

接下来，我们可以创建一个名为api.js的文件，用于封装请求接口。在api.js中，我们可以定义各种请求接口的方法，例如：

import axios from 'axios'

const baseUrl = 'http://api.example.com' //接口请求基础URL

export const getUserInfo = (userId) => {
  return axios.get(baseUrl + '/user/' + userId)
}

export const postUserInfo = (userInfo) => {
  return axios.post(baseUrl + '/user', userInfo)
}

export const deleteUserInfo = (userId) => {
  return axios.delete(baseUrl + '/user/' + userId)
}

在上述代码中，我们定义了三个请求接口方法，分别是获取用户信息、提交用户信息和删除用户信息。

接下来，在需要使用接口的组件中引入这些接口方法：

import { getUserInfo, postUserInfo, deleteUserInfo } from './api.js'

然后，在组件中可以直接使用这些封装好的接口方法发送请求，例如：

getUserInfo(123).then(response => {
  //处理请求成功后返回的数据
}).catch(error => {
  //处理请求失败的错误
})

const userInfo = {
  //用户信息数据
}

postUserInfo(userInfo).then(response => {
  //处理请求成功后返回的数据
}).catch(error => {
  //处理请求失败的错误
})

deleteUserInfo(123).then(response => {
  //处理请求成功后返回的数据
}).catch(error => {
  //处理请求失败的错误
})

上述代码演示了如何使用封装好的接口方法发送请求，其中.then()方法处理请求成功后返回的数据，.catch()方法处理请求失败的错误。

通过封装接口方法，我们可以将复杂的请求逻辑隐藏在api.js文件中，使组件更加清晰和简洁，提高了项目的可维护性。同时，由于接口方法已经封装好，可以在其他组件中重复使用，提高了代码的复用性。