java系列|Vue —— axios、插槽前端|javascript|vue.js

配置代理

1、项目下载 axios 并引入 npm i axios
【java系列|Vue —— axios、插槽】2、配置文件 vue.config.js 中配置代理：

module.exports = defineConfig({ ... devServer: {proxy: { '/proxy01': {//代理前缀 target: 'http://localhost:5000',//代理目标服务器 pathRewrite:{'^/proxy01':''},//重写路径，把含 /proxy01 前缀替换为空字符 ws: true,// 用于支持webSocket ChangeOrigin: true//用于控制请求头中的host值 },//可以配置多个服务器代理 '/proxy02': {//代理前缀 target: 'http://localhost:4000',//代理目标服务器 pathRewrite:{'^/proxy02':''},//重写路径，把含 /proxy02 前缀替换为空字符 ws: true,// 用于支持webSocket ChangeOrigin: true//用于控制请求头中的host值 } } } })
3、xxx.vue

... import axios from 'axios' //引入axios ... getData01(){axios.get('http://localhost:8080/proxy01/data01').then( Response => { console.log('请求成功了',Response.data) }, error => { console.log('请求失败了',error.message) } ) },getData02(){ axios.get('http://localhost:8080/proxy02/data02').then( Response => { console.log('请求成功了',Response.data) }, error => { console.log('请求失败了',error.message) } ) }

3、创建 api 文件夹 { index.js、request.js }
request.js

//对 axios 进行二次封装 import axios from "axios"; //1.利用axios对象的create,去创建一个axios实例 //2.request就是axios，只不过稍微配置一下 const requests = axios.create({ //配置对象 //基础路径，发请求的时候，路径当中会出现api baseURL:"/api", timeout:5000, }); //请求拦截器 requests.interceptors.request.use((config)=>{ //config：配置对象，对象里面有一个属性很重要，headers请求头 return config; }); //响应拦截器 requests.interceptors.response.use( (res)=>{ //响应成功的回调函数 return res.data; }, (error)=>{ //响应失败的回调函数 return Promise.reject(new Error('faile')); })//暴露 export default requests;

index.js

// 此 index.js：对 API 进行统一管理//引入二次封装的axios ==> requests import requests from "./request"; //三级联动接口//1.已知请求后端的路径为'/api/product/getBaseCategoryList' export const reqCategoryList = () =>{ //发请求：axios发请求返回结果 Promise 对象 // 因为 api/request.js 中配置了 baseURL:"/api",所以下面不需要加 /api return requests({url:'/product/getBaseCategoryList',method:'get'}); }// 可以简写为 export const reqCategoryList = () =>requests({url:'/product/getBaseCategoryList',method:'get'});