vue 请求拦截

最新推荐文章于 2024-08-19 11:35:22 发布

Almee211

最新推荐文章于 2024-08-19 11:35:22 发布

阅读量2.3k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Almee211/article/details/120896691

版权

这篇博客探讨了Vue.js应用中的请求拦截技术，详细介绍了生命周期、虚拟DOM及其diff算法，强调了如何通过fetch和axios进行网络请求，并对axios的get和post请求配置进行了说明。特别是重点讲解了axios的请求拦截器，以及如何设置全局配置来优化请求处理。

摘要由CSDN通过智能技术生成

一、常用属性

1.生命周期：从vue实例产生开始到vue实例被销毁这段时间所经历的过程。

<body>
  <div id='app'>
    <p id='p1' @click='handleClick'>{
  {msg}}</p>
  </div>
</body>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '迈开大步匆匆忙忙'
    },
    methods: {
      handleClick() {
        console.log('你点我了')
      },
      getData() {
        return '测试'
      }
    },
    beforeCreate() {
      console.log(this)
    // 特点：在此时 获取不到data 数据 以及 methods 中的方法
      console.log(this.msg)
      console.log(this.handleClick)
    },
    created() {
    // 特点：可以访问 data 数据和mthods 方法  一般这里写数据接口调用
      console.log(this.msg)
      console.log(this.getData())
    },
    beforeMount() {
    //页面还是上一次展示的页面，此时数据渲染出来的模板已经在浏览器的内存中，但是还没有替换到页面上
    // 挂载前    el: "#app" 还没有挂在到 vm 实例上
      console.log(document.querySelector('#p1'))
    },
    mounted() {
    // 挂载后 ， 此时 浏览器内存中的dom 结构已经挂在到   el: "#app"上了。
      console.log(document.querySelector('#p1'))
    },
    beforeUpdate() {
       // 页面数据更新前的生命周期
       // 特点：此时页面数据还是旧数据，但是data中的数据已经更新
      console.log(1, this.msg)
      console.log(2, document.querySelector('#p1').innerHTML)
    },
    updated() {
   // 页面数据已经更新完毕
   // 特点：此时data中的数据和页面的数据一致啦
      console.log(document.querySelector('#p1'))
    },
    beforeDestroy() {
    // 组件实例销毁前，当前不展示该组件了跳转到其他页面了
      },
    destroyed() {
    // 组件实例销毁后，当前不展示该组件了跳转到其他页面了
    }
  })
</script>

运行结果：