uni-app封裝axios進行請求響應攔截和token設置的操作指南

更新時間：2025年01月15日 10:13:44 作者：Microi風閑

uni-app 是一個使用 Vue.js 開發(fā)所有前端應用的框架,開發(fā)者編寫一套代碼,可發(fā)布到 iOS、Android、Web（響應式）、以及各種小程序,Axios 是一個基于 Promise 的 HTTP 客戶端,本文我給大家介紹了uni-app封裝axios進行請求響應攔截和token設置的操作指南

一、前言

uni-app 是一個使用 Vue.js 開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到 iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。

uni-app 在開發(fā)者數(shù)量、案例、跨端抹平度、擴展靈活性、性能體驗、周邊生態(tài)、學習成本、開發(fā)成本等8大關(guān)鍵指標上擁有更強的優(yōu)勢。

從下面 uni-app 功能框架圖可看出， uni-app 在跨平臺的過程中，不犧牲平臺特色，可優(yōu)雅的調(diào)用平臺專有能力，真正做到海納百川、各取所長。

今日探討主題：uni-app 封裝 axios 進行請求響應攔截和 token 設置 的問題。

二、Axios 介紹

Axios 是一個基于 Promise 的 HTTP 客戶端，它的優(yōu)點包括：

支持請求和響應攔截
自動轉(zhuǎn)化JSON格式
取消請求
防止CSRF（跨站請求偽造）

三、項目結(jié)構(gòu)

在我們開始代碼編寫之前，首先了解一下我們的項目結(jié)構(gòu)。這是一個簡單的UniApp 項目的結(jié)構(gòu)示例：

|-- src
|   |-- api
|   |   |-- axios.js
|   |-- pages
|   |-- main.js
|-- manifest.json
|-- uniapp.config.js

四、封裝Axios

在 UniApp 項目中，我們需要創(chuàng)建一個用于 Axios 請求的模塊。我們將在src/api/axios.js 中進行封裝。

// src/api/axios.js
import axios from 'axios';
import { getToken } from './auth'; // 假設我們有一個獲取token的文件

const service = axios.create({
    baseURL: process.env.BASE_API, // 基礎路由
    timeout: 5000 // 請求超時
});

// 請求攔截器
service.interceptors.request.use(
    config => {
        const token = getToken();
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`; // 如果存在token，則加上
        }
        return config;
    },
    error => {
        console.error('請求錯誤:', error);
        return Promise.reject(error);
    }
);

// 響應攔截器
service.interceptors.response.use(
    response => {
        return response.data;
    },
    error => {
        console.error('響應錯誤:', error);
        return Promise.reject(error);
    }
);

export default service;

在上面的代碼中，我們創(chuàng)建了一個 Axios 實例，并配置了請求和響應攔截器。這樣，我們可以在每次請求時自動添加 Token ，以支持身份驗證。

五、使用封裝的Axios

一旦封裝完成，接下來就可以在任何頁面中使用這個 Axios 實例來進行請求了。假如我們有一個獲取用戶信息的接口，可以在相應的頁面中進行如下調(diào)用：

// src/pages/user.vue
<template>
  <view>
    <text>{{ userInfo }}</text>
  </view>
</template>

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

export default {
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      try {
        const data = await axios.get('/user/info');
        this.userInfo = data;
      } catch (error) {
        console.error('獲取用戶信息失敗:', error);
      }
    }
  }
};
</script>

在這個例子中，我們在 mounted 生命周期鉤子中調(diào)用 getUserInfo 方法，通過調(diào)用封裝的 Axios 實例，順利獲得結(jié)構(gòu)化的用戶信息。

六、總結(jié)

到此為止，我們完成了在 UniApp項目中封裝 Axios 的基本流程，并將其打包為手機 App 。通過上述步驟，我們可以輕松實現(xiàn)數(shù)據(jù)請求的封裝，從而提高開發(fā)效率及代碼的維護性。希望本文對你們的 UniApp 開發(fā)之路有所幫助。下一步可以嘗試加入更多的功能模塊，讓你的應用更加豐富多彩！

以上就是uni-app封裝axios進行請求響應攔截和token設置的操作指南的詳細內(nèi)容，更多關(guān)于uni-app封裝axios響應攔截和token設置的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: