vue封装一个接口

1.使用axios npm install axios or yarn add axios

创建一个vue组件或一个单独的javascript文件来封装你的接口

api.js

import axios from 'axios';
 
// 创建一个API服务对象
const api = {
    // 例如，封装一个获取用户信息的接口
    getUser(userId) {
        return axios.get(`https://api.example.com/users/${userId}`);
    },
 
    // 封装一个创建用户的接口
    createUser(userData) {
        return axios.post('https://api.example.com/users', userData);
    }
};
 
export default api;

在你的vue组件中，你可以这样使用这个封装的接口：

<template>
  <div>
    <h1>用户信息</h1>
    <p>{{ user.name }}</p>
  </div>
</template>
 
<script>
import api from './api'; // 导入刚才创建的api模块
 
export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.fetchUser(); // 在组件创建时获取用户信息
  },
  methods: {
    fetchUser() {
      api.getUser(1) // 假设用户ID为1
        .then(response => {
          this.user = response.data; // 更新用户数据
        })
        .catch(error => {
          console.error('获取用户信息失败:', error);
        });
    }
  }
}
</script>

2.Fetch API 如果你不想使用axios,你也可以用原生的fetch API来封装接口，例如：在api.js中：

// 封装一个获取用户信息的接口使用fetch API
const getUser = (userId) => {
    return fetch(`https://api.example.com/users/${userId}`)
        .then(response => response.json()); // 默认JSON解析响应体
};
 
// 封装一个创建用户的接口使用fetch API（需要设置请求体）
const createUser = (userData) => {
    return fetch('https://api.example.com/users', {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        headers: {
            'Content-Type': 'application/json' // 设置请求头为JSON格式，以便服务器正确解析请求体
        },
        body: JSON.stringify(userData) // 将JavaScript对象转换为JSON字符串并发送到服务器作为请求体。注意：如果要发送表单数据，则不需要设置Content-Type为application/json，而是使用FormData对象等。
    })
    .then(response => response.json()); // 默认JSON解析响应体
};

在你的vue组件中使用这些封装的接口：

<template>
  <div>
    <h1>用户信息</h1>
    <p>{{ user.name }}</p>
  </div>
</template>
 
<script>
import { getUser } from './api'; // 导入刚才创建的api模块中的getUser函数
 
export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.fetchUser(); // 在组件创建时获取用户信息
  },
  methods: {
    fetchUser() {
      getUser(1) // 假设用户ID为1，并调用封装的getUser函数获取用户信息。注意：这里的getUser不是一个Promise，所以你需要处理它作为一个Promise来使用。例如，你可以通过async/await来实现。或者你可以直接在`.then().catch()`中处理它。为了示例清晰，这里使用`.then().catch()`。 如果你选择使用async/await，请确保你的函数返回一个Promise。例如，你可以修改getUser函数使其返回一个Promise。这样你在组件中就可以使用async/await了。例如：`async fetchUser() {...}`。然后在该函数中你可以写`await getUser(1