1、axios的使用第一步先装包
npm i axios -S
2、axios的使用方法，先导入包，再绑定事件，再注册事件
3、axios如何实现post请求
4、Vue挂载axios,简便输入地址：
5、通过this实例，可以访问到axios的链接
6、给他改成$http的格式
7、要发起请求用this.$http
8、这样写法耦合死比较严重，如何进行修改：
9、这时我们可以通过axios做一些全局配置,在main.js文件中
10、后使用直接写，路径地址就行，这样比较方便一些
11、这种做法最大的缺点是无法实现API的副用
Vue3axios的使用：
所有组件都由App管
第一步，先在utils下创建一个request.js文件
第二步：utils下的request.js文件：
import axios from "axios"; import { ElMessage } from "element-plus"; const baseURL = '/api'; const instance = axios.create({ baseURL: baseURL }); import { useTokenStore } from '@/stores/token.js' //添加请求拦截器 instance.interceptors.request.use( (config) => { //请求前的回调 //添加token const tokenStore = useTokenStore(); //判断有没有token if (tokenStore.token) { config.headers.Authorization = tokenStore.token } return config; }, (err) => { //请求错误的回调 Promise.reject(err) } ) instance.interceptors.response.use( result => { // 判断业务状态代码 if (result.data.code === 0) { return result.data; } // 操作失败 // alert(result.data.msg ? result.data.msg : '服务异常') ElMessage.error(result.data.msg ? result.data.msg : '服务异常') return Promise.reject(result.data) }, err => { alert('服务异常'); return Promise.reject(err); } ) // 导出axios自定义函数 export default instance
第三步：不同的接口写不同的方法，之后调用API接口就在Api里写就行了，用的时候先import内容 
参考资料:
Vue3接口的资料参考，72节：
安装下载
实战篇-60_大事件_注册_接口调用_哔哩哔哩_bilibili
Vue2调用axios获取数据方法
Vue3要求是在request.js中写好，然后在API中的URL写好路径，API的是访问的接口，request.js中的是baseURL,是后端的那个9090
import axios from "axios"; import { ElMessage } from "element-plus"; const baseURL = 'http://localhost:9090'; const instance = axios.create({ baseURL: baseURL }); import { useTokenStore } from '@/stores/token.js' //添加请求拦截器 instance.interceptors.request.use( (config) => { //请求前的回调 //添加token const tokenStore = useTokenStore(); //判断有没有token if (tokenStore.token) { config.headers.Authorization = tokenStore.token } return config; }, (err) => { //请求错误的回调 Promise.reject(err) } ) instance.interceptors.response.use( result => { // 判断业务状态代码 if (result.data.code === 0) { return result.data; } // 操作失败 // alert(result.data.msg ? result.data.msg : '服务异常') ElMessage.error(result.data.msg ? result.data.msg : '服务异常') return Promise.reject(result.data) }, err => { alert('服务异常'); return Promise.reject(err); } ) // 导出axios自定义函数 export default instance
一个类似这样的get请求方法，如何写
看Vue3各种接口编写，这一种如果把参数写过去的话，会以json格式传过去，意思是向后端发送json数据 
遍历他，会有响应的数据
用的时候import导入就行
Vue3全局挂载使用axios和设置baseURL
import { createApp } from 'vue' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import App from './App.vue' import router from '@/router' import { createPinia } from 'pinia' import { createPersistedState } from 'pinia-persistedstate-plugin' import ElementPlus from 'element-plus' import locale from 'element-plus/theme-chalk/index.css' import * as ElementPlusIconsVue from '@element-plus/icons' import axios from "axios"; // Vue.prototype.$http=axios; // axios.defaults.baseURL="http://localhost:9090" // import editor from '@/views/editorViewDemo.vue' // main.ts import 'element-plus/dist/index.css' const app = createApp(App) for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.config.globalProperties.$http =axios; axios.defaults.baseURL="http://localhost:9090";
