axios-vue3详解

在Vue3.x中，使用axios进行HTTP请求时，需要使用官方推荐的@vue/axios库。下面我们来详细介绍axios-vue3库。

一、安装和引入axios-vue3

在工程中使用npm或者yarn进行安装：

npm install axios-vue3

或者

yarn add axios-vue3

在Vue项目中引入axios-vue3：

import axios from 'axios'
import { useAxios, AxiosProvider } from 'axios-vue3'

const instance = axios.create({
  baseURL: 'https://api.example.com/api/',
  timeout: 1000
})

const axiosPlugin = {
  install: (app) => {
    app.provide('$http', instance)
  }
}

createApp(App)
  .use(AxiosProvider, instance)
  .use(axiosPlugin)
  .mount('#app')

二、 发送GET请求

使用axios-vue3发送GET请求非常简单，只需要调用useAxiosGet函数，传入请求的URL即可。

import { useAxiosGet } from 'axios-vue3'

export default {
  setup() {
    const { result, loading, error, fetch } = useAxiosGet('https://api.example.com/api/users')

    return {
      users: result.value,
      loading,
      error,
      fetch
    }
  }
}

三、发送POST请求

发送POST请求同样非常简单，只需要调用useAxiosPost函数，传入请求的URL和请求体即可。

import { useAxiosPost } from 'axios-vue3'

export default {
  setup() {
    const { result, loading, error, fetch } = useAxiosPost('https://api.example.com/api/users', {
      name: 'John',
      email: 'john@example.com'
    })

    return {
      user: result.value,
      loading,
      error,
      fetch
    }
  }
}

四、并行请求

axios-vue3支持并发发送多个请求，使用useAxiosAll函数，传入所有请求的URL后，会返回所有请求的结果。

import { useAxiosAll } from 'axios-vue3'

export default {
  setup() {
    const { results, loading, errors, fetch } = useAxiosAll([
        'https://api.example.com/api/users/1',
        'https://api.example.com/api/users/2',
        'https://api.example.com/api/users/3'
    ])

    return {
      users: results.value,
      loading,
      errors,
      fetch
    }
  }
}

五、自定义axios请求实例

使用自定义axios请求实例，只需要通过AxiosProvider组件传入自定义的axios实例即可。

import axios from 'axios'
import { createApp } from 'vue'
import App from './App.vue'
import { AxiosProvider } from 'axios-vue3'

const instance = axios.create({
  baseURL: 'https://api.example.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

const app = createApp(App)
app.use(AxiosProvider, instance)
app.mount('#app')

六、拦截请求和响应

在axios-vue3中，可以通过自定义拦截器，对请求和响应进行拦截和处理。

拦截请求：

const instance = axios.create({
  baseURL: 'https://api.example.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

instance.interceptors.request.use(config => {
  // 在请求发出之前拦截处理
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`
  return config
}, error => {
  // 发送请求出错
  return Promise.reject(error)
})

拦截响应：

const instance = axios.create({
  baseURL: 'https://api.example.com/api/',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
})

instance.interceptors.response.use(response => {
  // 在请求返回响应数据之前拦截处理
  return response
}, error => {
  // 响应出错
  return Promise.reject(error)
})

七、参考文献

axios-vue3官方文档：https://github.com/JanickFischbacher/vue-axios