Vue使用Axios請求攔截器的案例詳解

更新時間：2024年12月05日 10:14:56 作者：景天科技苑

在Vue項(xiàng)目中,Axios是一個非常流行的HTTP客戶端,用于發(fā)送請求和接收響應(yīng),Axios攔截器是Axios的一個強(qiáng)大功能,它允許你在請求發(fā)送之前和響應(yīng)返回之后對請求和響應(yīng)進(jìn)行處理和攔截,本文將結(jié)合實(shí)際案例,詳細(xì)介紹如何在Vue中使用Axios攔截器,需要的朋友可以參考下

Vue中Axios攔截器

在Vue項(xiàng)目中，Axios是一個非常流行的HTTP客戶端，用于發(fā)送請求和接收響應(yīng)。Axios攔截器是Axios的一個強(qiáng)大功能，它允許你在請求發(fā)送之前和響應(yīng)返回之后對請求和響應(yīng)進(jìn)行處理和攔截。通過攔截器，你可以添加請求頭、處理請求參數(shù)、處理錯誤等。本文將結(jié)合實(shí)際案例，詳細(xì)介紹如何在Vue中使用Axios攔截器。

一、安裝Axios

首先，你需要在Vue3項(xiàng)目中安裝Axios。你可以使用npm或yarn等包管理工具進(jìn)行安裝。

npm install axios

或者

yarn add axios

二、創(chuàng)建Axios實(shí)例

在Vue3項(xiàng)目中，通常會在項(xiàng)目的某個地方創(chuàng)建一個Axios實(shí)例，并對其進(jìn)行配置。你可以將Axios實(shí)例放在一個單獨(dú)的文件中，例如src/axios.js。

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL', // 設(shè)置請求的baseURL
  timeout: 5000, // 設(shè)置請求超時時間
});

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

在上面的代碼中，我們使用axios.create方法創(chuàng)建了一個Axios實(shí)例，并傳遞了一些配置選項(xiàng)，例如baseURL和timeout。

三、設(shè)置請求攔截器

請求攔截器允許你在請求發(fā)送之前對請求進(jìn)行處理。你可以在Axios實(shí)例中使用interceptors.request.use方法來添加請求攔截器。

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL',
  timeout: 5000,
});

// 添加請求攔截器
axiosInstance.interceptors.request.use(
  (config) => {
    // 在發(fā)送請求之前做些什么
    // 例如，添加請求頭
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    
    // 處理請求參數(shù)
    // config.params = {
    //   ...config.params,
    //   key: 'value',
    // };

    return config;
  },
  (error) => {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

在上面的代碼中，我們添加了一個請求攔截器。在攔截器中，我們檢查本地存儲中是否存在token，如果存在，則將其添加到請求頭中。你還可以對請求參數(shù)進(jìn)行處理，例如添加或修改參數(shù)。

四、設(shè)置響應(yīng)攔截器

響應(yīng)攔截器允許你在響應(yīng)返回之后對響應(yīng)進(jìn)行處理。你可以在Axios實(shí)例中使用interceptors.response.use方法來添加響應(yīng)攔截器。

// src/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例
const axiosInstance = axios.create({
  baseURL: '// 你的基礎(chǔ)URL',
  timeout: 5000,
});

// 添加請求攔截器（同上）

// 添加響應(yīng)攔截器
axiosInstance.interceptors.response.use(
  (response) => {
    // 對響應(yīng)數(shù)據(jù)做些什么
    // 例如，處理響應(yīng)數(shù)據(jù)格式
    // response.data = {
    //   ...response.data,
    //   key: 'value',
    // };

    return response;
  },
  (error) => {
    // 對響應(yīng)錯誤做些什么
    const { response } = error;
    if (response) {
      // 判斷錯誤狀態(tài)碼
      if (response.status === 400) {
        // 請求錯誤
      } else if (response.status === 401) {
        // 未授權(quán)，請重新登錄
      } else if (response.status === 403) {
        // 拒絕訪問（403）
      }

      return Promise.reject(response.data);
    } else {
      console.error('網(wǎng)絡(luò)連接異常，請稍后再試！');
    }
  }
);

// 導(dǎo)出Axios實(shí)例
export default axiosInstance;

在上面的代碼中，我們添加了一個響應(yīng)攔截器。在攔截器中，我們可以對響應(yīng)數(shù)據(jù)進(jìn)行處理，例如修改數(shù)據(jù)格式。我們還可以根據(jù)響應(yīng)的狀態(tài)碼來處理不同的錯誤情況。

五、在Vue組件中使用Axios實(shí)例

現(xiàn)在，我們已經(jīng)在項(xiàng)目中創(chuàng)建了Axios實(shí)例，并添加了請求和響應(yīng)攔截器。接下來，我們可以在Vue組件中使用這個Axios實(shí)例來發(fā)送請求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>數(shù)據(jù)展示</div>
</template>

<script>
import axiosInstance from '../axios';

export default {
  name: 'YourComponent',
  mounted() {
    axiosInstance.get('/your-endpoint')
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error('錯誤:', error);
      });
  },
};
</script>

在上面的代碼中，我們在Vue組件的mounted生命周期鉤子中使用了Axios實(shí)例來發(fā)送一個GET請求。請求成功后，我們將響應(yīng)數(shù)據(jù)打印到控制臺。如果請求失敗，我們將錯誤信息打印到控制臺。

六、封裝請求方法

為了更方便地在項(xiàng)目中發(fā)送請求，我們可以將常用的請求方法封裝起來。例如，我們可以封裝GET和POST請求方法。

// src/api/axios.js
import axios from 'axios';

// 創(chuàng)建Axios實(shí)例（同上）

// 封裝GET請求方法
export function getRequest(url, params = {}) {
  return axiosInstance.get(url, { params });
}

// 封裝POST請求方法
export function postRequest(url, data = {}) {
  return axiosInstance.post(url, data);
}

現(xiàn)在，我們可以在Vue組件中使用封裝好的請求方法來發(fā)送請求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>數(shù)據(jù)展示</div>
</template>

<script>
import { getRequest, postRequest } from '../api/axios';

export default {
  name: 'YourComponent',
  mounted() {
    // 使用GET請求方法
    getRequest('/your-get-endpoint', { param1: 'value1' })
      .then(data => {
        console.log('GET請求響應(yīng):', data);
      })
      .catch(error => {
        console.error('GET請求錯誤:', error);
      });

    // 使用POST請求方法
    postRequest('/your-post-endpoint', { key: 'value' })
      .then(data => {
        console.log('POST請求響應(yīng):', data);
      })
      .catch(error => {
        console.error('POST請求錯誤:', error);
      });
  },
};
</script>

七、統(tǒng)一管理API接口

在項(xiàng)目中，我們可能會有很多API接口。為了方便管理和維護(hù)，我們可以將這些接口統(tǒng)一管理起來。例如，我們可以在src/api目錄下創(chuàng)建一個api.js文件，并在其中定義所有的API接口。

// src/api/api.js
import { getRequest, postRequest } from './axios';

// 定義用戶相關(guān)API接口
export class UserApi {
  static async login(params) {
    return postRequest('/login', params);
  }

  static async register(params) {
    return postRequest('/register', params);
  }

  static async getUserInfo(params) {
    return getRequest('/userInfo', params);
  }
}

// 定義書籍相關(guān)API接口
export class BookApi {
  static async getBookList(params) {
    return getRequest('/bookList', params);
  }
}

現(xiàn)在，我們可以在Vue組件中使用統(tǒng)一管理好的API接口來發(fā)送請求。

<!-- src/components/YourComponent.vue -->
<template>
  <div>
    <button @click="handleLogin">登錄</button>
  </div>
</template>

<script>
import { UserApi } from '../api/api';

export default {
  name: 'YourComponent',
  methods: {
    async handleLogin() {
      const params = {
        username: 'admin',
        password: '123456',
      };
      try {
        const response = await UserApi.login(params);
        console.log('登錄成功:', response);
      } catch (error) {
        console.error('登錄失敗:', error);
      }
    },
  },
};
</script>

拓展：Vue配置axios響應(yīng)攔截器

一個項(xiàng)目會發(fā)送很多請求到后端,每個請求都有如下的響應(yīng)

不想每個請求都去判斷里面的status,那么可以使用axios的響應(yīng)攔截器,對服務(wù)端返回的一些相同點(diǎn)做統(tǒng)一的處理

比如說如果有報錯,就統(tǒng)一彈出這么個錯誤信息

在src目錄下新建utils目錄里新建api.js(名字隨你自己)

原先彈出錯誤信息,可以直接只用

this.$message.error('請輸入正確格式')

但是現(xiàn)在是在js文件里,需要額外單獨(dú)引入

配置axios響應(yīng)攔截器(其實(shí)也可以配置請求攔截器,就是在所有請求里添加什么什么什么,比如說統(tǒng)一添加請求頭)

這里先介紹響應(yīng)攔截器

import axios from 'axios'
import { Message } from 'element-ui';
import router from '../router'//導(dǎo)入文件夾,自動會去找里面的index.js
  
 
const instances = axios.create({
    baseURL: 'http://localhost',
  });
 
//響應(yīng)攔截器
instances.interceptors.response.use(success=>{//這個success指的是調(diào)用接口成功
    
    console.log('響應(yīng)攔截器,chenggong')
   
},error=>{//接口根本沒有調(diào)用到或者服務(wù)器掛了,各種原因
   
    console.log('響應(yīng)攔截器,shibai',error)
    Message.error({message:error})
});
 
// //可以在所有請求前添加前置路徑
// let base='';
 
// //封裝請求并導(dǎo)出
// export const postRequest=(url,params)=>{
//     return axios({
//         method:'post',
//         url:'${base}${url}',
//         data:params
//     })
// }
 
export default instances;

記得在main.js引入