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包括这个请求响应回来的所有信息

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

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

 文章来源地址https://www.toymoban.com/news/detail-635289.html

到了这里，关于html+Vue+封装axios实现发送请求的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！