vue全家桶进阶之路46：Vue3 Axios拦截器

发布时间：2023-04-23 文章分类：编程知识投稿人：李佳字号：默认 | 大 | 超大打印

在Vue.js 3中，使用Axios与Vue.js 2.x中类似，但是需要进行一些修改和更新，下面是Vue.js 3中Axios的定义和使用方式：

首先，你需要安装Axios和Vue.js 3.x，可以使用npm或yarn等包管理工具安装：

npm install axios vue@next

然后，在你的Vue.js 3应用程序中，你可以使用以下代码来导入和使用Axios：

import { ref } from 'vue'
import axios from 'axios'
export default {
  setup() {
    const data = ref(null)
    const error = ref(null)
    axios.get('/api/data')
      .then(response => {
        data.value = response.data
      })
      .catch(error => {
        error.value = error
      })
    return { data, error }
  }
}

上面的代码使用Axios发出一个GET请求，从API端点/api/data获取数据，并将响应数据赋值给Vue组件的data变量中，如果请求出错，则将错误信息赋值给error变量。

注意，在Vue.js 3中，使用Axios时，需要将其包装在Vue 3的Reactivity API中，例如，上面的代码中，使用了Vue 3的ref函数将data和error变量转换为响应式对象。

除此之外，在Vue.js 3中，你可以将Axios作为插件使用，并在Vue实例中进行全局配置。下面是一个示例：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'
const app = createApp(App)
app.config.globalProperties.$axios = axios
// 在这里添加更多的全局配置

app.mount('#app')

上面的代码将Axios作为Vue的插件，并将其添加到Vue实例的全局属性$axios中，以便在应用程序的任何组件中使用。

总之，Vue.js 3中的Axios使用与Vue.js 2.x基本相同，但需要使用Vue 3的Reactivity API将数据转换为响应式对象。此外，你可以将Axios作为Vue的插件使用，并在Vue实例中进行全局配置。

globalProperties

globalProperties 是 Vue 3 中的一个全局配置对象，它允许你在应用程序的任何地方添加自定义的全局属性和方法。

在 Vue.js 3 中，你可以使用 app.config.globalProperties 对象添加全局属性和方法，这样在 Vue 实例中就可以直接访问它们，而不需要在每个组件中都进行导入。

例如，你可以通过以下方式在 globalProperties 中添加一个全局属性 $myGlobalData：

const app = createApp(App)
app.config.globalProperties.$myGlobalData = { name: 'John', age: 30 }
app.mount('#app')

这样，在 Vue 组件中就可以通过 $myGlobalData 访问这个全局属性：

export default {
  setup() {
    const data = ref($myGlobalData)
    return { data }
  }
}

同样，你也可以在 globalProperties 中添加全局方法：

const app = createApp(App)
app.config.globalProperties.$myGlobalMethod = function() {
  console.log('This is a global method!')
}
app.mount('#app')

然后，在 Vue 组件中就可以通过 $myGlobalMethod() 调用这个全局方法：

export default {
  setup() {
    $myGlobalMethod() // 输出：This is a global method!
  }
}

需要注意的是，globalProperties 中添加的全局属性和方法会在所有 Vue 组件中共享，并且会被所有组件实例继承。因此，你需要确保添加的全局属性和方法不会与组件实例中的属性和方法冲突。

ctx

在 Vue 3 中，ctx 是组件上下文对象，它包含了一个组件实例的所有属性和方法。

在 Vue 3 的组件中，你可以使用 setup() 函数来编写组件的逻辑代码。setup() 函数会接收一个 ctx 参数，它是一个组件上下文对象，包含了许多属性和方法，可以帮助你访问和操作组件实例。

下面是 ctx 对象中的一些常用属性和方法：

attrs: 包含了所有传递给组件的非响应式属性，例如 id、class、style 等。
emit: 用于触发自定义事件，可以传递任意数量的参数。例如，ctx.emit('my-event', arg1, arg2) 将触发名为 my-event 的自定义事件，并传递 arg1 和 arg2 两个参数。
expose: 用于暴露组件的属性和方法，使它们可以被父组件访问。例如，ctx.expose({ myProp, myMethod }) 将 myProp 属性和 myMethod 方法暴露给父组件。
slots: 包含了所有插槽内容的函数或者节点，可以使用 v-slot 或者 slot-scope 来定义插槽。
attrs: 包含了所有传递给组件的非响应式属性，例如 id、class、style 等。
listeners: 包含了所有绑定在组件上的事件监听器，可以通过 v-on 或者 @ 绑定事件。例如，<my-component @click="handleClick" /> 将在 ctx.listeners 中包含一个名为 click 的属性，它的值是 handleClick 方法。
root: 当前组件树中的根组件实例。
refs: 包含了所有在组件上使用 ref 注册的 DOM 元素或组件实例，可以使用 ctx.refs.refName 访问。
attrs: 包含了所有传递给组件的非响应式属性，例如 id、class、style 等。

需要注意的是，ctx 对象中的属性和方法都是只读的，你不能修改它们的值。如果你需要修改组件实例的属性或者方法，你可以在 setup() 函数中使用 ref、reactive、computed 等响应式 API 来创建可响应的变量和方法。

Proxy

Proxy 是 ES6 中新增的一种原生对象，用于在运行时动态地拦截和处理 JavaScript 对象的操作。它提供了一个可编程的代理，可以对目标对象进行操作前进行预处理和过滤，从而可以用来实现许多高级功能，例如数据绑定、数据校验、属性拦截等。

Proxy 对象的基本用法如下：

let target = { name: 'John', age: 30 };
let proxy = new Proxy(target, {
  get: function(target, prop, receiver) {
    console.log(`Getting ${prop} from target`);
    return target[prop];
  },
  set: function(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value} on target`);
    target[prop] = value;
    return true;
  }
});
proxy.name; // Output: "Getting name from target", "John"
proxy.age; // Output: "Getting age from target", 30
proxy.location = "New York"; // Output: "Setting location to New York on target"

在上面的例子中，我们创建了一个名为 target 的普通对象，然后用 Proxy 对象对其进行包装。在 Proxy 对象的第二个参数中，我们定义了一个拦截器对象，包含了两个方法 get 和 set。当我们对 proxy 对象进行属性读取时，会触发 get 方法，输出一个日志和目标对象中对应属性的值；当我们对 proxy 对象进行属性设置时，会触发 set 方法，输出一个日志，并将目标对象中对应属性的值进行更新。

除了上面的 get 和 set 方法之外，Proxy 还提供了许多其他的拦截方法，包括 apply、construct、defineProperty、deleteProperty、getOwnPropertyDescriptor、getPrototypeOf、has、isExtensible、ownKeys、preventExtensions、setPrototypeOf 等。你可以在这些拦截方法中进行各种预处理和过滤操作，从而实现各种高级功能。

需要注意的是，Proxy 对象只能对对象进行操作，不能对原始值进行操作。此外，由于 Proxy 对象会对目标对象进行包装，所以会导致一定的性能损耗，因此应该谨慎使用。

getCurrentInstance

ctx 和 getCurrentInstance 都是 Vue 3 中的全局 API，用于在组件中获取当前上下文和当前组件实例对象，但它们的作用不完全相同。

ctx 是一个包含了组件实例对象以及一些额外属性和方法的上下文对象，它可以在组件的模板和组合式 API 中使用。ctx 包含了许多属性和方法，例如 attrs、emit、slots、root 等，这些属性和方法可以让我们更方便地访问组件的数据和方法。例如，我们可以通过 ctx.attrs 来访问组件的属性，通过 ctx.emit 来触发组件的自定义事件。

getCurrentInstance 则是一个用于获取当前组件实例对象的全局 API，它可以在组件的模板和组合式 API 中使用。与 ctx 不同的是，getCurrentInstance 返回的是当前组件实例对象本身，而不是一个包含了组件实例对象的上下文对象。这意味着，通过 getCurrentInstance 我们可以访问到组件实例对象的所有属性和方法，而不仅仅是 ctx 中包含的属性和方法。例如，我们可以通过 getCurrentInstance().$refs 来访问组件的引用。

需要注意的是，ctx 和 getCurrentInstance 都是 Vue 3 中的 API，在 Vue 2 中并不存在。在 Vue 2 中，我们可以通过 this 来访问组件实例对象和组件的数据和方法。

标签 iOS, OS, 拦截