vue axios封装掘金

原创

mob64ca12e83232 2024-08-05 08:59:49 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e83232的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue Axios 封装指南

在现代 Web 开发中，使用 Axios 与 Vue.js 进行数据交互已成为一种常见的做法。本文将为你详细讲解如何封装 Axios，并以示例说明每一步的实现。

流程概述

在开始之前，我们会先概述整个流程，分为以下几个步骤：

步骤	描述
1	安装 Axios 和 Vue
2	创建 Axios 实例
3	封装请求方法
4	在 Vue 组件中使用

下面是这几个步骤的流程图：

flowchart TD
    A[安装 Axios 和 Vue] --> B[创建 Axios 实例]
    B --> C[封装请求方法]
    C --> D[在 Vue 组件中使用]

步骤详解

1. 安装 Axios 和 Vue

首先，确保你已经安装了 Vue 和 Axios。若项目还未创建，可以通过 Vue CLI 创建一个新项目。

# 安装 Vue CLI（如果未安装）
npm install -g @vue/cli

# 创建一个新的 Vue 项目
vue create my-project

# 进入项目目录
cd my-project

# 安装 Axios
npm install axios

2. 创建 Axios 实例

在项目中，创建一个文件夹用于存放 Axios 的封装代码，通常我们放在 src/utils/ 下，文件名为 axios.js：

// src/utils/axios.js

import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
    baseURL: ' // 设置基础URL
    timeout: 10000, // 请求超时时间
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
    // 在请求发送之前做些什么，例如添加授权头
    config.headers['Authorization'] = 'Bearer your_token';
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response.data;
}, error => {
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 导出封装的实例
export default instance;

3. 封装请求方法

在同一文件中，我们可以定义一些常用的请求方法。这些方法可以处理 GET 和 POST 请求等。

// src/utils/axios.js（继续添加）

// 封装 GET 请求
export const get = (url, params = {}) => {
    return instance.get(url, { params });
};

// 封装 POST 请求
export const post = (url, data = {}) => {
    return instance.post(url, data);
};

4. 在 Vue 组件中使用

完成 Axios 封装后，我们可以在 Vue 组件中使用它。例如，在 src/components/Example.vue 组件中请求数据：

<template>
  <div>
    Axios 封装示例
    <p>{{ message }}</p>
  </div>
</template>

<script>
// 引入封装的 axios 方法
import { get } from '@/utils/axios';

export default {
  data() {
    return {
      message: '',
    };
  },
  created() {
    // 在组件创建时请求数据
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 发送 GET 请求
        const response = await get('/path/to/endpoint');
        this.message = response.message; // 根据后端接口返回的数据结构来设置
      } catch (error) {
        console.error('请求数据失败:', error);
      }
    },
  },
};
</script>