html+Vue+封装axios实现发送请求

在html中使用Vue和Axios时，可以在HTML中引入Vue库和Axios库，然后使用Vue的语法和指令来创建Vue组件和模板。在Vue组件中，你可以使用Axios发送HTTP请求来获取数据，并将数据绑定到Vue模板中进行展示。

<template><div><button @click="getData">发送请求</button><div>{{ response }}</div></div>
</template><script>
// 导入Vue和axios
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
import axios from 'axios';// 创建Vue应用
const app = createApp({data() {return {response: ''};},methods: {async getData() {try {const response = await axios.get('https://api.example.com/data');this.response = response.data;} catch (error) {console.error(error);}}},created() {// 设置请求拦截器axios.interceptors.request.use(// config就是本次发请求的信息config => {// 在发送请求之前做些什么console.log('请求拦截器');return config;},error => {// 对请求错误做些什么console.error(error);return Promise.reject(error);});// 设置响应拦截器axios.interceptors.response.use(response => {// 对响应数据做些什么console.log('响应拦截器');return response;},error => {// 对响应错误做些什么console.error(error);return Promise.reject(error);});}
});// 挂载Vue应用到指定元素上
app.mount('#app');
</script>

这段代码在HTML中使用了Vue，使用axios并设置了请求拦截器和响应拦截器。它实现了在页面中发送请求并显示响应数据的功能。

在模板中，有一个按钮，当点击按钮时，会调用getData方法发送请求。响应数据会显示在页面上的response变量中。

在created生命周期钩子中，我们设置了请求拦截器和响应拦截器。请求拦截器会在发送请求之前执行，可以在此处进行一些操作，比如添加请求头、修改请求参数等。响应拦截器会在接收到响应数据之后执行，可以在此处对响应数据进行处理，比如解析数据、错误处理等。

这样，每次发送请求时，拦截器会先执行相应的操作，然后再发送请求或处理响应数据。

想要实现封装Axios以及请求拦截器和响应拦截器，只需将相应的操作提取出来，放在一个文件夹下，在需要使用的地方使用script引入文件即可。 

/** axios封装* 请求拦截、相应拦截、错误统一处理*/

每一个请求都会经过请求拦截和响应拦截

请求拦截器：常常用于Token的主动处理 ，给每一个请求添加请求头token 对请求异常抛出。

响应拦截器：常常用于简化axios默认加了一层的data Token被动处理 对请求异常抛出。

响应拦截器：简化axios默认加了一层的data Token被动处理 对请求异常抛出。

axios默认加了一层data

这个res包括这个请求响应回来的所有信息

所有的接口请求都会回到这里

获取到本次请求得到的数据