uni-app 封装 axios 进行请求响应拦截和 token 设置

---

---

一、前言🍃

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

---

🎯今日探讨主题：uni-app 封装 axios 进行请求响应拦截和 token 设置 的问题。

二、Axios 介绍

Axios 是一个基于 Promise 的 HTTP 客户端，它的优点包括：

• 支持请求和响应拦截
• 自动转化JSON格式
• 取消请求
• 防止CSRF（跨站请求伪造）

三、项目结构

在我们开始代码编写之前，首先了解一下我们的项目结构。这是一个简单的UniApp 项目的结构示例：

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

四、封装Axios

在 UniApp 项目中，我们需要创建一个用于 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, // 基础路由