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
	})
}


评论(

您还未登录,请先去登录
表情
查看更多

相关作者

  • 获取点赞0
  • 文章阅读量133

相关文章

联系小鹿线

咨询老师

咨询老师

扫码下载APP