Vue2 配置 Axios api 接口调用文件的方法

下面是关于"Vue2 配置 Axios api 接口调用文件的方法"的完整攻略，包含两个示例说明。

简介

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。在Vue2项目中，我们可以使用Axios来发送HTTP请求，并处理响应数据。本文将详细讲解如何在Vue2项目中配置Axios api接口调用文件，并提供两个示例说明。

配置Axios api接口调用文件

以下是在Vue2项目中配置Axios api接口调用文件的步骤：

1. 在Vue2项目中安装Axios：

npm install axios --save

在上面的命令中，我们使用npm命令来安装Axios。

1. 在src目录下创建一个名为"api"的文件夹，并在该文件夹下创建一个名为"index.js"的文件。

2. 在"index.js"文件中添加以下代码：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8080/api'

export const getUserById = (id) => {
  return axios.get(`/user/${id}`)
}

export const addUser = (user) => {
  return axios.post('/user', user)
}

在上面的代码中，我们使用ES6的模块化语法导入Axios，并设置Axios的默认基础URL。然后，我们定义了两个API接口调用函数：getUserById和addUser。

1. 在Vue组件中使用API接口调用函数：

import { getUserById, addUser } from '@/api'

export default {
  methods: {
    getUser(id) {
      getUserById(id).then(response => {
        console.log(response.data)
      })
    },
    addUser(user) {
      addUser(user).then(response => {
        console.log(response.data)
      })
    }
  }
}

在上面的代码中，我们使用ES6的模块化语法导入getUserById和addUser函数，并在Vue组件中使用这些函数来调用API接口。

示例说明

以下是两个示例说明，演示如何在Vue2项目中使用Axios api接口调用文件：

示例1：根据ID获取用户信息

在Vue组件中添加以下代码：

import { getUserById } from '@/api'

export default {
  methods: {
    getUser(id) {
      getUserById(id).then(response => {
        console.log(response.data)
      })
    }
  }
}

在上面的代码中，我们使用ES6的模块化语法导入getUserById函数，并在Vue组件中使用该函数来调用API接口。启动Vue2应用程序，并在浏览器中打开控制台，可以看到API接口已经成功调用，并输出了响应数据。

示例2：添加用户

在Vue组件中添加以下代码：

import { addUser } from '@/api'

export default {
  methods: {
    addUser(user) {
      addUser(user).then(response => {
        console.log(response.data)
      })
    }
  }
}

在上面的代码中，我们使用ES6的模块化语法导入addUser函数，并在Vue组件中使用该函数来调用API接口。启动Vue2应用程序，并在浏览器中打开控制台，可以看到API接口已经成功调用，并输出了响应数据。