基于vue框架封装一个请求接口的js

最新推荐文章于 2025-05-21 17:35:09 发布

原创最新推荐文章于 2025-05-21 17:35:09 发布 · 409 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #ecmascript #前端框架

在 Vue.js 中封装请求接口的 JavaScript 文件，可以使用 axios 进行 HTTP 请求。下面是一个简单的封装示例，你可以根据需求扩展功能，比如请求拦截、响应拦截、错误处理等。

安装 Axios

首先，确保你已经安装了 axios：

封装 `http.js`

创建一个名为 http.js 的文件，用来统一处理所有的请求。

// http.js
import axios from 'axios';

const http = axios.create({
  baseURL: 'https://api.example.com/', // 基础路径，根据你的 API 地址修改
  timeout: 10000, // 请求超时设置
  headers: {
    'Content-Type': 'application/json',
  },
});

// 请求拦截器：你可以在此统一处理 token 等信息
http.interceptors.request.use(
  config => {
    // 如果有 token，可以在请求头添加 Authorization
    const token = localStorage.getItem('token'); // 假设 token 存储在 localStorage
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器：统一处理响应数据或错误
http.interceptors.response.use(
  response => {
    // 你可以在此统一处理响应数据，比如根据状态码进行处理
    if (response.data.code !== 200) {
      return Promise.reject(response.data.message || '接口错误');
    }
    return response.data; // 返回数据给调用方
  },
  error => {
    let errorMessage = '请求失败';
    if (error.response) {
      // 请求发出去并收到响应，但响应的状态码不是 2xx
      errorMessage = error.response.data.message || error.response.statusText;
    } else if (error.request) {
      // 请求发出去，但没有收到响应
      errorMessage = '网络错误或无响应';
    }
    return Promise.reject(errorMessage);
  }
);

export default http;

如何使用封装的 HTTP 请求

在 Vue 组件中，你可以通过 import 引入 http.js 来进行 API 请求。下面是一个使用示例：

// ExampleComponent.vue
<template>
  <div>
    <h1>{{ userInfo.name }}</h1>
  </div>
</template>

<script>
import http from '@/utils/http'; // 导入封装的 http.js

export default {
  data() {
    return {
      userInfo: {}
    };
  },
  mounted() {
    this.fetchUserInfo();
  },
  methods: {
    async fetchUserInfo() {
      try {
        const data = await http.get('/user/info'); // 发送 GET 请求
        this.userInfo = data; // 请求成功，赋值数据
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>