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