鸿蒙next之axios二次封装并携带cookie

滴水恩情  金牌会员 | 2025-2-22 22:35:50 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 981|帖子 981|积分 2943

 
由于官方提供的@ohos.net.http模块，直接利用不是很灵活，就引入了第三方@ohos/axios库。
以下是引入axios并进行二次封装的步骤：
1、DevEco Studio打开终端输入命令安装插件
   ohpm install @ohos/axios
   2、新建RequestUtil.ets
  1. import { JSON, url } from '@kit.ArkTS';
  2. import { emitter } from '@kit.BasicServicesKit';
  3. import { showToast } from '../../common/utils/ToastUtil';
  4. import { CommonType } from '../utils/TypeUtil';
  5. import { CaresPreference,CookieManager } from './common';
  6. import Constants, { ContentType } from '../../common/constants/Constants';
  7. import axios,{InternalAxiosRequestConfig, AxiosResponse,AxiosError,AxiosRequestConfig,AxiosInstance} from '@ohos/axios';
  9. // 发送订阅事件
  10. function sendEmitter(eventId: number, eventData: emitter.EventData) {
  11.   // 定义事件，事件优先级为HIGH
  12.   let event: emitter.InnerEvent = {
  13.     eventId:  eventId,
  14.     priority: emitter.EventPriority.HIGH
  15.   };
  16.   // 发送事件
  17.   emitter.emit(event, eventData);
  18. }
  20. export const BASE_URL = `${Constants.BASE_SERVER}`;
  22. // 处理40开头的错误
  23. export function errorHandler(error: CommonType) {
  24.   if (error instanceof AxiosError) {
  25.     switch (error.status) {
  26.     // 401: 未登录
  27.       case 401:
  28.         break;
  30.       case 403: //无权限未登录
  31.         // 弹出登录页
  32.         let eventData: emitter.EventData = {
  33.           data: {
  34.             isShow: true
  35.           }
  36.         };
  37.         sendEmitter(Constants.EVENT_LOGIN_PRESENT, eventData)
  38.         break;
  40.     // 404请求不存在
  41.       case 404:
  42.         showToast("网络请求不存在")
  43.         break;
  45.     // 其他错误，直接抛出错误提示
  46.       default:
  47.         showToast(error.message)
  48.     }
  49.   }
  50. }
  52. // 创建实例
  53. const service: AxiosInstance = axios.create({
  54.   baseURL: '',
  55.   timeout: Constants.HTTP_READ_TIMEOUT, //超时时间
  56.   withCredentials: true, // 跨域请求是否需要携带 cookie
  57.   headers: {  // `headers` 是即将被发送的自定义请求头
  58.     'Content-Type': 'application/json;charset=utf-8'
  59.   }
  60. })
  62. let caresPreference: CaresPreference = CaresPreference.getInstance();
  63. // 请求拦截器
  64. service.interceptors.request.use(async(config:InternalAxiosRequestConfig) => {
  66.   let Cookie: string = '';
  67.   const cookie = await caresPreference.getValueAsync<string>('APP_Cookies');
  68.   if(cookie){
  69.     Cookie = cookie;
  70.   }
  71.   // 由于存储的cookie是这样的‘SSOSESSION=OWEwMTBlOTktNjQ2Yy00NDQ1LTkyMTctZTc3NWY2Nzg5MGM2; Path=/; HttpOnly’
  72. // axios网络框架携带的cookie要这种SSOSESSION=OWEwMTBlOTktNjQ2Yy00NDQ1LTkyMTctZTc3NWY2Nzg5MGM2
  73. // 接口才能请求通过（在cookie设置这里卡了挺长时间，鸿蒙自带的http请求带上Path=/; HttpOnly是可以请求通过的，axios要去掉Path=/; HttpOnly）
  74.   config.headers['Cookie'] = String(Cookie).split(';')[0];
  75.   return config;
  77. }, (error:AxiosError) => {
  79.   console.info('全局请求拦截失败', error);
  80.   Promise.reject(error);
  81. });
  83. // 响应拦截器
  84. service.interceptors.response.use((res:AxiosResponse)=> {
  85.   console.info('响应拦截====',JSON.stringify(res))
  87.   const config:AxiosRequestConfig = res.config;
  89.   // 获取登录接口cookie，并进行存储
  90.   if(config?.url && config?.url.includes('login') && `${JSON.stringify(res.headers['set-cookie'])}`.includes('SSOSESSION')){
  92.     let urlObj = url.URL.parseURL(config?.baseURL);
  93.     let cookies:CommonType = res.headers['set-cookie'] as CommonType;
  94.     if(cookies){
  95.       CookieManager.saveCookie(urlObj.host, String(cookies))
  96.     }
  97.     let sss = CookieManager.getCookies()
  99.     console.info(urlObj.host + sss)
  101.     caresPreference.setValueAsync('APP_Cookies', res.headers['set-cookie']).then(() => {
  102.       console.info('存储cookie：' + res.headers['set-cookie']);
  103.     })
  104.     return Promise.resolve(res.data);
  105.   }
  107.   if(res.status === 200){
  108.     // 错误返回码
  109.     if ( ['40001','40002','40003'].includes(res.data.code)) {
  110.       showToast(res.data.message)
  111.     } else {
  112.       Promise.resolve(res.data);
  113.     }
  114.   }
  115.   return res.data;
  117. }, (error:AxiosError)=> {
  119.   console.info("AxiosError",JSON.stringify(error.response))
  120.   errorHandler(error.response as AxiosResponse)
  121.   return Promise.reject(error);
  122. });
  124. // 导出 axios 实例
  125. export default service;
复制代码
  1. Common.ets
复制代码
  1. export { CsPreference } from './CsPreference';
  2. export { CookieManager } from './CookieManager';
复制代码
  1. CsPreference.ets
  2. 本地信息存储
复制代码
  1. import { common } from '@kit.AbilityKit';
  2. import { preferences } from '@kit.ArkData';
  4. const PREFERENCES_NAME: string = 'CS_PREFERENCES';
  6. export class CSPreference {
  7.   private preferences: preferences.Preferences;
  8.   private context = getContext(this) as common.UIAbilityContext;
  9.   private static instance: CsPreference;
  11.   constructor() {
  12.     this.preferences = preferences.getPreferencesSync(this.context, { name: PREFERENCES_NAME })
  13.   }
  15.   public static getInstance(): CsPreference {
  16.     if (!CsPreference.instance) {
  17.       CsPreference.instance = new CsPreference();
  18.     }
  19.     return CsPreference.instance;
  20.   }
  22.   setValue(key: string, value: preferences.ValueType) {
  24.     if (value != undefined) {
  25.       this.preferences.putSync(key, value)
  26.       this.preferences.flush()
  27.     }
  28.   }
  30.   getValue(key: string): preferences.ValueType | undefined {
  32.     return this.preferences?.getSync(key, undefined)
  33.   }
  35.   hasValue(key: string): boolean {
  36.     return this.preferences.hasSync(key)
  37.   }
  39.   deleteValue(key: string) {
  40.     this.preferences.deleteSync(key)
  41.     this.preferences.flush()
  42.   }
  46.   async initPreference(storeName: string): Promise<void> {
  47.     return preferences.getPreferences(this.context, storeName)
  48.       .then((preferences: preferences.Preferences) => {
  49.         this.preferences = preferences;
  50.       });
  51.   }
  53.   async setValueAsync<T>(key: string, value: T): Promise<void> {
  54.     if (this.preferences) {
  55.       this.preferences.put(key, JSON.stringify(value)).then(() => {
  56.         this.saveUserData();
  57.       })
  58.     } else {
  59.       this.initPreference(PREFERENCES_NAME).then(() => {
  60.         this.setValueAsync<T>(key, value);
  61.       });
  62.     }
  63.   }
  65.   async getValueAsync<T>(key: string): Promise<T | null> {
  66.     if (this.preferences) {
  67.       return this.preferences.get(key, '').then((res: preferences.ValueType) => {
  68.         let value: T | null = null;
  69.         if (res) {
  70.           value = JSON.parse(res as string) as T;
  71.         }
  72.         return value;
  73.       });
  74.     } else {
  75.       return this.initPreference(PREFERENCES_NAME).then(() => {
  76.         return this.getValueAsync<T>(key);
  77.       });
  78.     }
  79.   }
  81.   async hasValueAsync(key: string): Promise<boolean> {
  82.     if (this.preferences) {
  83.       return this.preferences.has(key);
  84.     } else {
  85.       return this.initPreference(PREFERENCES_NAME).then(() => {
  86.         return this.hasValue(key);
  87.       });
  88.     }
  89.   }
  91.   async deleteValueAsync(key: string): Promise<void> {
  92.     if (this.preferences) {
  93.       this.preferences.delete(key).then(() => {
  94.         this.saveUserData();
  95.       });
  96.     } else {
  97.       this.initPreference(PREFERENCES_NAME).then(() => {
  98.         this.deleteValue(key);
  99.       });
  100.     }
  101.   }
  103.   saveUserData() {
  104.     this.preferences?.flush();
  105.   }
  106. }
复制代码
  1. CookieManager.ets
  2. cookie 全局同步
复制代码
  1. import { CsPreference } from './CsPreference'
  3. const GLOBAL_COOKIE: string = "cs_global_cookie"
  5. export class CookieManager {
  7.   static removeCookie(host: string) {
  8.     let arr = CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>
  10.     if (arr) {
  11.       let filteredArray = arr.filter((item)=>{
  12.         JSON.parse(item).host != host
  13.       })
  14.       CsPreference.getInstance().setValue(GLOBAL_COOKIE, filteredArray)
  15.     }
  16.   }
  18.   static saveCookie(host: string, cookie: string) {
  20.     CookieManager.removeCookie(host)
  21.     let obj: Record<string, Object> = {};
  22.     obj["host"] = host;
  23.     obj["cookie"] = cookie;
  25.     let arr = CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>
  27.     if (arr == undefined) {
  28.       arr = new Array<string>()
  29.     }
  30.     arr.push(JSON.stringify(obj))
  31.     CsPreference.getInstance().setValue(GLOBAL_COOKIE, arr)
  32.   }
  34.   static getCookies(): Array<string>{
  35.    return CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>
  36.   }
  38. }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

滴水恩情

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表