Vue3.0的axios封裝教程

Vue3.0是目前比較流行的前端框架之一，而axios則是目前比較常用的前端數據請求工具。 axios是基於Promise的HTTP客戶端，可以在瀏覽器和Node.js中使用。Vue3.0在封裝axios方面也有很多值得我們學習的思路和方法。本篇文章將從多個方面對Vue3.0中axios的封裝做出詳細闡述。

一、安裝和初始化axios

在使用Vue3.0中的axios之前，我們需要先安裝axios。可以通過npm進行安裝：

npm install axios --save

然後在main.js中，我們可以將axios掛載到Vue的原型鏈上，這樣我們在組件中就可以通過this.$axios來使用axios

//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'

Vue.prototype.$axios = axios

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

二、axios的全局配置

在Vue3.0中，我們可以通過axios.create()方法創建一個axios實例，並配置一些全局屬性。例如設置請求的基本URL，設置請求頭等等。 在main.js中可以這樣配置：

//在main.js中
import axios from 'axios'
import App from './App.vue'
import router from './router'

const http = axios.create({
  baseURL: 'http://api.example.com/'
})

//可以設置請求頭
http.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
Vue.prototype.$http = http

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

三、axios的攔截器

攔截器是axios中非常重要的功能之一，可以在請求發出前和響應返回前進行攔截，用來處理請求或響應的一些共性操作。 Vue3.0中提供了一種捕獲全局錯誤並把錯誤信息反饋給用戶的方式，使用axios攔截器可以很容易地實現這樣的功能。

const http = axios.create({
  baseURL: 'http://api.example.com/'
})

//添加請求攔截器
http.interceptors.request.use(function (config) {
  //在發送請求之前做些什麼
  return config;
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
});

//添加響應攔截器
http.interceptors.response.use(function (response) {
  //對響應數據做點什麼
  return response;
}, function (error) {
  //如果捕獲到了401狀態碼，說明登錄過期或者未登錄，就可以彈出登錄框，請用戶重新登錄
  if (error.response.status === 401) {
    //彈出登錄框邏輯
  }
  // 對響應錯誤做點什麼
  return Promise.reject(error);
});

四、封裝axios的request方法

在使用axios進行請求的時候，我們可以根據需要在組件中多次調用，但這樣會將一些公共的請求參數反覆寫入組件。我們可以將這些共性操作封裝在一個request方法中，方便多次使用。例如：

//在api.js中
import axios from "axios";

const instance = axios.create({
  baseURL: "http://api.example.com",
  timeout: 10000
});

const request = async (options) => {
  try {
    const response = await instance(options);
    return response.data;
  } catch (error) {
    console.error(error);
  }
};

export { request, instance };

在組件中直接引入並使用：

//在組件中
import { request } from "@/api";

const getUser = async () => {
  const data = await request({
    method: "get",
    url: "/users",
    params: {
      id: 1,
    },
  });

  console.log(data);
};

總結

本篇文章通過多個方面對Vue3.0中axios的封裝做出詳細闡述。首先介紹了axios的安裝和初始化，然後引入了全局配置和攔截器兩種功能，最後介紹了將多次使用的請求封裝在一個request方法中的技巧。通過這些方式，我們可以更加簡便地使用axios，並可以進行一些全局的錯誤處理、基礎URL配置等功能。