axios请求封装

1.安装 axios

npm install axios
# 或
yarn add axios

2.创建封装文件

在项目的合适位置（例如 src/request/index.js）创建一个新的文件来封装 axios。

3.编写封装代码

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: "/api", // 你的API基础URL，可以在.env文件中配置
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在这里可以添加全局的请求头，例如token
    // if (localStorage.getItem('token')) {
    //   config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    // }
    return config;
  },
  (error) => {
    // 处理请求错误
    console.error(error); // for example
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    console.log(response);
    // 对响应数据做点什么，例如统一处理code为200的情况
    if (response.status === 200) {
      return Promise.resolve(response.data);
    } else {
      return Promise.reject(response.data);
    }
  },
  (error) => {
    // 处理响应错误
  }
);

export default service;

4.将同类型的接口请求封装到一个文件（例如user的增删改都封装到user.js）

import request from './index'; // 引入封装好的axios实例

export const getUser = ()=>{
  return request({
    url:'/users',
    method:'get'
  })
}

5.组件中使用

import { getUser }from "@/requests/user"

getUser().then((res) => {
  console.log(res)
})

6.代码实现

本次代码实现用到vue3、mock（可查看上一篇文章）、axios、element-plus（为优化代码提示，若不使用，参考上方代码即可）
mian.js

import { createApp } from 'vue'
import App from './App.vue'
import "./mock/index"

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'



createApp(App).use(ElementPlus).mount('#app')

request/index.js

import axios from "axios";
import { ElMessage } from "element-plus"; //使用element-plus的ElMessage提示错误信息

// 创建axios实例
const service = axios.create({
  baseURL: "/api", // 你的API基础URL，可以在.env文件中配置
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 在这里可以添加全局的请求头，例如token
    // if (localStorage.getItem('token')) {
    //   config.headers['Authorization'] = `Bearer ${localStorage.getItem('token')}`;
    // }
    return config;
  },
  (error) => {
    // 处理请求错误
    console.error(error); // for example
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    console.log(response);
    // 对响应数据做点什么，例如统一处理code为200的情况
    if (response.status === 2000) {
      return Promise.resolve(response.data);
    } else {
      ElMessage.error(response.data.message || "Error"); // 使用element-plus的ElMessage提示错误信息
      return Promise.reject(response.data);
    }
  },
  (error) => {
    // 处理响应错误
    if (error.response && error.response.status) {
      switch (error.response.status) {
        case 404:
          ElMessage.error("Network Error");
          break;
        case 500:
          ElMessage.error("Server Error");
          break;
        // 其他错误码...
        default:
          ElMessage.error(error.message);
      }
      return Promise.reject(error);
    } else {
      ElMessage.error("Error", error.message);
    }
  }
);

export default service;

request/user.js

import request from './index'; // 引入封装好的axios实例

export const getUser = ()=>{
  return request({
    url:'/users',
    method:'get'
  })
}

vue组件

<script setup>
import { getUser } from "@/requests/user";
getUser().then((res) => {
  console.log(res);
});
</script>

<template>
  
</template>

<style scoped></style>