为了进一步学习如何在HBuilder进行网络请求，我们用GitCode提供的开放API进行练习。先从不用认证的"https://api.gitcode.com/api/v5/users/{username}"入手。

这里参考的文档是gitcode-docs-5.0 | GitCode 帮助文档，感兴趣的小伙伴可以去看看。

虽然 uni.request 是 uni-app 自带的请求方式，但为了与主流前端开发接轨（如 Vue、React 项目），掌握 Axios 这一业界标准库显得尤为重要。

本文将记录如何在 HBuilderX 环境下安装 Axios，实现自动携带 Token 和统一的错误拦截。

1. 环境准备与安装

首先，在 HBuilderX 中打开我们的 uni-app 项目。

打开底部的终端窗口，在项目根目录下执行以下命令安装 Axios：

npm install axios

注意：如果你的项目没有 package.json 文件，请先执行 npm init -y 初始化。

2. 为什么要封装 Axios？

如果直接在页面中使用 Axios，代码会变得非常冗余：

// ❌ 错误示范：代码冗余，维护困难
axios.get('https://api.gitcode.com/api/v5/users/someuser', {
    headers: { 'Authorization': 'Bearer my-token' }
}).then(res => {
    console.log(res.data)
}).catch(err => {
    // 每个页面都要写一遍错误处理
    if(err.response.status === 401) alert('未登录')
})

通过封装，我们可以实现：

1. 统一配置：管理 BaseURL 和超时时间。

2. 请求拦截：自动在 Header 中添加 Token。

3. 响应拦截：统一处理 401、404 等网络错误，剥离冗余的数据层级。

所以最好是把axios的相关代码都集合封装在一个js文件里。

3. 核心代码实现

在项目根目录下新建 utils 文件夹，并创建 request.js 文件。

先创建了axios的实例，然后再编写请求拦截器和响应拦截器。可以先去axios的官网（拦截器 | Axios中文文档 | Axios中文网）复制粘贴请求器和拦截器的代码，然后再进行修改。

这里先是把错误码的提示都添加进响应拦截器，再把token放进请求拦截器，这样每次请求的时候都会携带这个token进行请求，这个token就像是令牌一样可以让守在giecode门口的门卫放行。

token需要去gitcode官网（个人访问令牌）获取，登录个人账户后创建访问令牌即可，再把拿到的token替换掉以下代码的token常量。

注意：这个token只会出现在创建的那一刻，之后退页面就不再出现。

// utils/request.js
import axios from 'axios';

// 1. 初始化 axios 实例
const service = axios.create({
  // GitCode API v5 的基础地址
  baseURL: 'https://api.gitcode.com/api/v5', 
  // 请求超时时间：5秒
  timeout: 5000, 
});

// 2. 请求拦截器 (Request Interceptor)
service.interceptors.request.use(
  (config) => {
    // 模拟从本地缓存获取 Token
    // 实际开发中，请将 'YOUR_PAT_TOKEN' 替换为你申请的 GitCode Personal Access Token
    const token = 'YOUR_GITCODE_PERSONAL_ACCESS_TOKEN'; 
    
    // 如果存在 Token，则将其添加到请求头中
    if (token) {
      // GitCode 通常遵循 OAuth2 标准，使用 Bearer + Token
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    console.error('请求配置异常:', error);
    return Promise.reject(error);
  }
);

// 3. 响应拦截器 (Response Interceptor)
service.interceptors.response.use(
  (response) => {
    // 这里的 response 是 axios 包装后的对象，data 才是服务器返回的真实数据
    const res = response.data;

    // 这里可以根据 GitCode 的业务状态码做进一步判断
    // 假设直接返回数据即可
    return res;
  },
  (error) => {
    // 处理 HTTP 网络错误
    let message = '';
    if (error.response) {
      const status = error.response.status;
      switch (status) {
        case 401:
          message = '认证失败：Token 无效或已过期';
          break;
        case 403:
          message = '拒绝访问：权限不足';
          break;
        case 404:
          message = '资源未找到：用户不存在';
          break;
        default:
          message = `网络错误 code: ${status}`;
      }
    } else {
      message = '网络连接超时或断开';
    }

    // 在 uni-app 中使用 Toast 提示错误
    uni.showToast({
      title: message,
      icon: 'none',
      duration: 2000
    });

    return Promise.reject(error);
  }
);

export default service;

4. 在页面中调用

经过调试可得知，获取到的response结果大致如下：

我们可以根据这个json数据，在调用这个接口后，将获取到的数据在 Vue 页面中展示出来，测试数据获取情况。

<template>
  <view class="container">
    <view class="box">
      <button type="primary" @click="fetchUserData">获取 GitCode 用户信息</button>
      
      <view v-if="userInfo" class="result">
        <text>用户名: {{ userInfo.name }}</text>
        <text>ID: {{ userInfo.id }}</text>
        <text>简介: {{ userInfo.bio }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import request from '/utils/request.js';

const getUserInfo = (username)=>request({
	url:`/users/${username}`,
	method:'get',
});

const userInfo = ref(null);
const fetchUserData = async () => {
  try {
    // 这里的参数 'gitcode' 是示例用户名，你可以换成任何真实存在的用户名
    const response = await getUserInfo('yilan-luo');
	const data = response;
    console.log('API返回数据:', data);
    userInfo.value = data;
    
    uni.showToast({
      title: '获取成功',
      icon: 'success'
    });
  } catch (error) {
    // 错误已经在拦截器中统一处理了（弹窗提示），这里只需处理业务逻辑
    console.log('业务层捕获错误');
  }
};
</script>

<style>
.container { padding: 20px; }
.result { 
  margin-top: 20px; 
  display: flex; 
  flex-direction: column; 
  background: #f5f5f5; 
  padding: 15px; 
  border-radius: 8px;
}
</style>

5. 调试与验证

1. 验证拦截器： 打开 Chrome 开发者工具（H5模式下）的 Network 面板。当你点击按钮时，查看 Request Headers，你会发现 Authorization 字段已经自动添加了你的 Token。

2. 验证错误处理： 尝试在代码中故意写错 Token 或查询一个不存在的用户名，你会看到界面上弹出了我们在 request.js 中定义的 uni.showToast 错误提示。

总结

通过这次实践，我们不仅学会了如何在 HBuilderX 中引入 Axios，更重要的是掌握了拦截器的使用。

• 请求拦截器就像是“安检员”，确保每个请求都带上了合法的通行证（Token）。

• 响应拦截器就像是“翻译官”，将服务器晦涩的错误码翻译成用户能看懂的提示。

欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。