vue3+vite+js中二次封装axios

一、安装axios

npm i axios

二、文件结构

涉及到的文件：

1. utils/request.sj
2. api/index.js（可以根据不同页面在api文件下新建不同文件夹，方便管理）
3. vite.config.js

三、request.js

对axios进行简单的二次封装

import axios from "axios";

const request = axios.create({
  // 此处的 '/api' 和 vite.config.js 的配置相关联
  baseURL: "/api",
  timeout: 50000,
  requestOptions: {
    withToken: true,
  },
});

// 数据请求拦截
request.interceptors.request.use(
  // 1. 返回config对象
  // 2. 可以设置携带 token 信息
  (config) => {
    const token = window.localStorage.getItem("access_token");
    token &&
      config?.requestOptions?.withToken &&
      (config.headers.token = token);
    return config;
  },
  (err) => {
    return Promise.reject(err);
  }
);

// 返回响应数据拦截
request.interceptors.response.use(
  (response) => {
    //   console.log("request.js打印返回信息" , response);
    // 简化返回数据
    if (response.data.code == "200") {
      return Promise.resolve(response.data);
    }
  },
  // 错误执行
  (error) => {
    console.log("错误信息", error);
    if (error.response.status) {
      switch (error.response.status) {
        case 404:
          console.log("请求路径找不到！");
          break;
        case 500:
          console.log("服务器内部报错！");
          break;
        // 还可以自己添加其他状态码
        default:
          break;
      }
    }
    return Promise.reject(new Error(error.message));
  }
);

// 暴露对象
export default request;

 四、index,js

api 文件下的 index.js

import request from "@/utils/request.js";

const API = {
  //获取名言
  GET_SENTENCES: "/api/sentences",
  //发送验证码
  GET_YANZHENGMA: "/api/sendVerificationCode",
  //注册
  GET_ZHUCE:"/api/register",
  //获取个人信息
  GET_USERINFO:"/api/getUserInfo"
};

//获取名言
export const reqSentences = () => request.get(API.GET_SENTENCES);
//发送验证码
export const reqYanzhengma = (data) => request.post(API.GET_YANZHENGMA, data);
//注册
export const reqZhuce = (data) => request.post(API.GET_ZHUCE, data);
//获取个人信息
export const reqUserinfo = () => request.get(API.GET_USERINFO);

五、vite.config.js 配置

使用： 配置代理跨域及请求路径

server: {
    port: 8080, // 设置服务启动端口号
    open: true, // 设置服务启动时是否自动打开浏览器
    cors: true, // 允许跨域
    // 设置代理，根据我们项目实际情况配置
    proxy: {
      //第一访问地址
      '/api': { //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
        target: 'https://api.apiopen.top/', // 需要代理的域名
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api/, ""), //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
      },
      //第二访问地址，以此类推可写多个
      '/api2': { //apiTest是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会进到代理来
        target: 'http://localhost:8080', // 需要代理的域名
        changeOrigin: true, // 是否跨域
        rewrite: (path) => path.replace(/^\/api2/, ""), //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
      }
    }
  }

路径重新定向

import { fileURLToPath, URL } from 'node:url'

resolve: {
    alias: {
      //路径重定向
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }

六、使用请求

<script setup>
import { onMounted, reactive, toRefs } from 'vue'
//引入请求方法
import { reqSentences, reqUserinfo } from "@/api";
const data = reactive({
  sentences: {}
})
//使用方法
const getuplist = async () => {
  await reqSentences().then((res) => {
    if (res.code == "200") {
      data.sentences = res.result
    } else {
      ElMessage.error("请求数据失败");
    }
  });

}
const getuserinfo = async () => {
  await reqUserinfo().then((res) => {
    if (res.code == "200") {
      console.log(res)
    } else {
      ElMessage.error("请求数据失败");
    }
  });

}
const { sentences } = toRefs(data)
onMounted(() => {
  getuplist()
  getuserinfo()
})
</script>