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

 
由于官方提供的@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企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告