封装vue3项目中axios的实例1

从0开始搭建框架,接口的封装是必不可少的,下面是一个不成熟的封装案例

1.下载axios插件是必不可少的

npm install axios

2. 我是在scr下面创建了一个api文件,下面又建了一个api.js的文件,取名这东西,follow you heart

import axios from 'axios';

const baseURL = 'https://api.example.com'; // 替换为您的API的基本URL

const axiosInstance = axios.create({
  baseURL,
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在请求发送之前可以进行一些处理，如添加认证头部等
    // 例如，您可以在这里添加身份验证令牌
    // config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 在这里对响应进行一些处理，例如处理错误信息或者对数据进行预处理
    return response.data;
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error);
  }
);

export default {
  // GET请求
  get(endpoint, params) {
    return axiosInstance.get(endpoint, { params });
  },

  // POST请求
  post(endpoint, data) {
    return axiosInstance.post(endpoint, data);
  },

  // PUT请求
  put(endpoint, data) {
    return axiosInstance.put(endpoint, data);
  },

  // DELETE请求
  delete(endpoint) {
    return axiosInstance.delete(endpoint);
  },
};

3.如何应用呢?

import Api from './api.js';

export default {
  methods: {
    async fetchData() {
      try {
        const response = await Api.get('/data'); // 发起GET请求
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理请求错误
        console.error(error);
      }
    },

    async saveData(data) {
      try {
        const response = await Api.post('/data', data); // 发起POST请求
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理请求错误
        console.error(error);
      }
    },

    async updateData(data) {
      try {
        const response = await Api.put('/data/1', data); // 发起PUT请求
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理请求错误
        console.error(error);
      }
    },

    async deleteData(id) {
      try {
        const response = await Api.delete(`/data/${id}`); // 发起DELETE请求
        // 处理响应数据
        console.log(response);
      } catch (error) {
        // 处理请求错误
        console.error(error);
      }
    },
  },
};

也算是一个最简单的应用方式了, 水了水了,各位晚安