HarmonyOS鸿蒙Next中如何封装Axios？然后token如何存储本地并调取

HarmonyOS鸿蒙Next中如何封装Axios？然后token如何存储本地并调取

我在一个页面上调取成功了，但是没有封装，还用的固定的临时token，根本不会封装Axios和存储token，有没有好心人帮一下，

2 回复

在HarmonyOS Next中封装网络请求可使用@ohos.net.http模块替代Axios。封装HTTP客户端需创建单例类，配置baseURL、超时等参数，提供get/post等方法。token存储使用@ohos.data.preferences持久化键值对存储，通过Preferences实例的put/get方法存取。请求拦截可在封装层实现，自动从Preferences读取token添加到header。具体代码需实现：1) HTTP请求封装类 2) Preferences工具类 3) token自动管理逻辑。注意Next版本API可能有差异，需参考最新文档实现。

更多关于HarmonyOS鸿蒙Next中如何封装Axios？然后token如何存储本地并调取的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中封装Axios并实现token存储调取的方案如下：

  1. 封装Axios基础请求：
// http.ts
import axios from 'axios';
import preferences from '@ohos.data.preferences';

const instance = axios.create({
  baseURL: 'your_api_base_url',
  timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(async (config) => {
  const token = await getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 响应拦截器
instance.interceptors.response.use(
  (response) => response.data,
  (error) => Promise.reject(error)
);

export default instance;
  1. Token存储与获取：
// storage.ts
import preferences from '@ohos.data.preferences';

const PREF_NAME = 'my_app_preferences';
const TOKEN_KEY = 'auth_token';

// 存储token
export async function saveToken(token: string): Promise<void> {
  try {
    const pref = await preferences.getPreferences(globalThis.context, PREF_NAME);
    await pref.put(TOKEN_KEY, token);
    await pref.flush();
  } catch (err) {
    console.error('Failed to save token:', err);
  }
}

// 获取token
export async function getToken(): Promise<string | null> {
  try {
    const pref = await preferences.getPreferences(globalThis.context, PREF_NAME);
    return await pref.get(TOKEN_KEY, null);
  } catch (err) {
    console.error('Failed to get token:', err);
    return null;
  }
}
  1. 使用示例：
import http from './http';
import { saveToken } from './storage';

// 登录示例
async function login(username: string, password: string) {
  try {
    const res = await http.post('/login', { username, password });
    await saveToken(res.token);
    return res;
  } catch (err) {
    throw err;
  }
}

// 获取数据示例
async function fetchData() {
  try {
    return await http.get('/data');
  } catch (err) {
    throw err;
  }
}

这个方案实现了：

  1. Axios实例的封装，包含请求/响应拦截器
  2. 使用HarmonyOS的preferences持久化存储token
  3. 自动在请求头中添加token
  4. 提供了基础的登录和数据获取示例

注意：实际使用时需要替换baseURL和调整错误处理逻辑。

回到顶部