vue3项目 Axios封装

Vite + Vue3设置代理和axios二次封装，api解耦

一、设置代理

文件：vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
    imports:['vue','vue-router']//自动导入vue和vue-router相关函数
  })
],
 server:{
  proxy:{
    '/api':'http://testapi.xuexiluxian.cn'
    }
  }
})

二、axios二次封装

文件：新建utils/request.js

import axios from 'axios';

//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;

三、API解耦合

import request from '../utils/request'

export function mostNew( data ){
	return request({
		url:'/api/course/mostNew',
		method:"post",
		data
	})
}

• 参考博文