封装axios

1、首先，安装 Axios（如果尚未安装）：npm install axios

2、创建一个名为 ‘api.js’的文件，用于封装axios

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际情况设置基础 URL
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在请求发送前可以添加一些逻辑，例如设置请求头
    return config;
  },
  (error) => {
    // 对请求错误做处理
    return Promise.reject(error);
  }
);

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

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

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

// ...可以继续封装其他 HTTP 方法，如 PUT、DELETE 等

export default instance;

 3、在vue组建中使用封装好的Axios

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p>{{ responseData }}</p>
  </div>
</template>

<script>
import { get } from './api'; // 根据 api.js 文件路径调整

export default {
  data() {
    return {
      responseData: '',
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await get('/data'); // 根据实际的 API 路径调整
        this.responseData = response;
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>