参考链接/p/ae793364e171
下载axios
npm install axios --save
文件存放
在src文件夹内新建 utils文件夹在utils文件夹中建立一个request.js文件（存放axios相关在utils文件夹内建立一个api文件夹，其中建立js文件（如果有需求可以建立多个按页面或者其他模块化），用来存放具体的请求封装axios
import axios from 'axios';// 设置axiosconst service = axios.create({baseURL: "/api" //基础路径设置在vite.config.js中，解决跨域问题})// 封装post请求let post = function (url, data_ = {}) {return new Promise((resolve, reject) => {service.post(url, data_).then((res) => {// 成功return resolve(res)}).catch((err) => {// 失败return reject(err)})})}let get = function(url,data_ ={}){return new Promise((resolve, reject) => {let params = data_;service.get(url, {params}).then((res) => {// 成功return resolve(res)}).catch((err) => {// 失败return reject(err)})})}// 添加请求拦截service.interceptors.request.use(config => {// 添加请求头config.headers = {"authorization": localStorage.token }return config;})// 添加响应拦截service.interceptors.response.use(res => {return res.data}, err => {return err})// 导出export default {post,get,}
具体请求实现
import axios from '../request.js';//获取首页数据export function getIndexData(){return axios.get('Index',{action:"getHomeData"})}// 获取系列数据export function getCategoryList(data){return axios.get('ProductList',data)}
注：axios.get(‘路径名’，携带参数)
注：携带参数类型为对象，即**{属性1，属性2……属性n}**
使用
// 获取首页数据getIndexData().then(res => {console.log(res);})
题外话：vue3.0中页面渲染数据，我将该请求放在beforeMount() 中，即数据获取成功才渲染页面，不知这样有没有什么弊端哈哈哈。
跨域
// 项目使用了vite，则在vite.config.js文件中。// 如仅使用vue，可百度看看其他人的写法，差距不大。//vite.config.jsimport {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({//……server: {proxy: {'/api': {// 需要注意的是这里的 /api 要与utils文件下面的axios.js文件的基础路径保持一致target: "", // 后端地址changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}},//……
