一、前言

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

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

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

今日探討主題：uni-app 封裝 axios 進(jìn)行請(qǐng)求響應(yīng)攔截和 token 設(shè)置 的問題。

二、Axios 介紹

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

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

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

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

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

四、封裝Axios

在 UniApp 項(xiàng)目中，我們需要?jiǎng)?chuàng)建一個(gè)用于 Axios 請(qǐng)求的模塊。我們將在src/api/axios.js 中進(jìn)行封裝。

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

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

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

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

export default service;

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

五、使用封裝的Axios

一旦封裝完成，接下來就可以在任何頁面中使用這個(gè) Axios 實(shí)例來進(jìn)行請(qǐng)求了。假如我們有一個(gè)獲取用戶信息的接口，可以在相應(yīng)的頁面中進(jìn)行如下調(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>

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

六、總結(jié)

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

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

最新評(píng)論