vue全家桶进阶之路46:Vue3 Axios拦截器
在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
来访问组件实例对象和组件的数据和方法。