【前端VUE基础（二）】Vue 项目中接口函数

        Vue 项目中，接口函数通常需要使用网络请求库（如 axios）来发送 HTTP 请求并处理响应数据。下面是一个完整的示例，展示了如何在 Vue 项目中定义和使用接口函数，并结合 axios 发送 HTTP 请求：

一、 安装axios

首先，需要使用 npm 安装 axios。

npm install axios --save

二、axios 二次封装

 在项目的 src 目录下创建一个名为 http.js 的文件，并在其中进行 axios 的二次封装。

import axios from 'axios';

const http = axios.create({
  baseURL: '/api',
  timeout: 10000
});

http.interceptors.request.use(
  config => {
    // 发起请求前的处理逻辑
    return config;
  },
  error => {
    // 请求错误的处理逻辑
    return Promise.reject(error);
  }
);

http.interceptors.response.use(
  response => {
    // 响应成功的处理逻辑
    return response;
  },
  error => {
    // 响应错误的处理逻辑
    return Promise.reject(error);
  }
);

export default http;

         上述代码定义了一个名为 http 的 axios 实例，并对其进行了二次封装。在 interceptors.request 和 interceptors.response 中可以定义请求和响应的拦截器，以便于在发起请求和接收响应时进行一些公共逻辑处理。在这个示例中，请求的基础 URL 设置为 /api，请求超时时间设置为 10 秒。

 三、定义接口函数

        在 src/api 目录下创建一个名为 user.js 的文件，并定义多个接口函数，例如 getUserInfo、updateUserInfo 等，使用上一步中定义的 http 实例发起 HTTP 请求，并返回 Promise 对象。

import http from '@/http';

const getUserInfo = () => {
  return http.get('/user/info');
};

const updateUserInfo = (data) => {
  return http.post('/user/info', data);
};

export { getUserInfo, updateUserInfo };

        上述代码使用 http 实例发起了 HTTP 请求，并返回 Promise 对象。可以根据项目需要定义不同的接口函数，使用不同的 HTTP 方法和 URL 端点。 

四、统一管理接口函数

 在 src/api/index.js 文件中导入所有接口函数，并统一导出。

import { getUserInfo, updateUserInfo } from './user';

export { getUserInfo, updateUserInfo };

         上述代码中，将所有接口函数导入，并使用 export 关键字统一导出。在其他文件中可以直接使用 import 语句导入 src/api 目录下的 index.js 文件，以便于使用所有接口函数。

 五、在组件中使用接口函数

在组件中使用 import 语句导入需要使用的接口函数，并在需要的时候调用它。

<template>
  <div>
    <h1>User Info</h1>
    <p>{{ userInfo }}</p>
    <button @click="updateUserInfo">Update Info</button>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo } from '@/api';

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    getUserInfo()
      .then(response => {
        this.userInfo = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
  methods: {
    updateUserInfo() {
      const data = { /* 更新用户信息的数据 */ };
      updateUserInfo(data)
        .then(response => {
          // 更新成功的处理逻辑
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

        上述代码中，通过 import 语句导入了 getUserInfo 和 updateUserInfo 函数，并在组件的 mounted 和 methods 生命周期中调用它们。在模板中使用插值语法显示 userInfo 数据属性的值，在按钮上绑定 updateUserInfo 方法以便于更新用户信息。