feat:请求封装

ZhangXianQiang

2024-06-18 3c25c2a5177be5c11d250861c4c64ca2676700a3

feat:请求封装

 .env.development

New file
@@ -0,0 +1 @@
VITE_BASE_API_URL = '';

 .env.production

New file
@@ -0,0 +1 @@
VITE_BASE_API_URL = '';

 src/api/index.js

@@ -0,0 +1,75 @@
import axios from "axios";
import { useRoute } from "vue-router";
const route = useRoute();
axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";

const service = axios.create({
  baseURL: import.meta.env.VITE_BASE_API_URL,
  timeout: 15000,
});

/**
 * 自定义状态码处理
 * @param {*} status 状态码
 * @param {*} info 信息
 */
const errorHandle = (status, info) => {
  switch (status) {
    case 400:
      console.log("语义有误");
      break;
    case 401:
      console.log("服务器认证失败");
      route.replace('/login');
      break;
    case 403:
      console.log("服务器拒绝访问");
      route.replace('/login');
      break;
    case 404:
      console.log("地址错误");
      break;
    case 500:
      console.log("服务器遇到意外");
      break;
    case 502:
      console.log("服务器无响应");
      break;
    default:
      console.log(info);
      break;
  }
};


// request拦截器
service.interceptors.request.use(
  (config) => {
    
    // const token = localStorage.getItem('authToken');
    // if (token) {
    //     config.headers['Authorization'] = `Bearer ${token}`;
    // }

    return config;
  },
  (error) => {
    // 返回Promise.reject(error)，这样会触发后续的错误处理器
    Promise.reject(error);
  },
);

// response拦截器
service.interceptors.response.use(
  (res) => {
    if (response.status === 200 && response.data.code === 200) return Promise.resolve(response.data);
    else return Promise.reject(response.data);
  },
  (error) => {
    const { response } = error;
    errorHandle(response.status, response.info);
    return Promise.reject(error);
  },
);

export default service;

 src/api/modules/user.js

New file
@@ -0,0 +1,6 @@
import service from "@/api";


export const login = (postData = {}) => {
  return service.post('/api/user/login', postData);
}

 src/views/login/index.vue

@@ -39,6 +39,8 @@
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/modules/user.js';


const router = useRouter();

@@ -106,6 +108,15 @@
  loginFormRef.value.validate((valid) => {
    if (valid) {
      router.push('/index');
      return;
      loading.value = true;
      login({}).then(res => {
        console.log(res);
        loading.value = false;
      }).catch(err => {
        console.log(err);
        loading.value = false;
      });
    }
  });
};