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

 

由于官方提供的@ohos.net.http模块，直接使用不是很灵活，就引入了第三方@ohos/axios库。

以下是引入axios并进行二次封装的步骤：

1、DevEco Studio打开终端输入命令安装插件

ohpm install @ohos/axios

 2、新建RequestUtil.ets

import { JSON, url } from '@kit.ArkTS';
import { emitter } from '@kit.BasicServicesKit';
import { showToast } from '../../common/utils/ToastUtil';
import { CommonType } from '../utils/TypeUtil';
import { CaresPreference,CookieManager } from './common';
import Constants, { ContentType } from '../../common/constants/Constants';
import axios,{InternalAxiosRequestConfig, AxiosResponse,AxiosError,AxiosRequestConfig,AxiosInstance} from '@ohos/axios';// 发送订阅事件
function sendEmitter(eventId: number, eventData: emitter.EventData) {// 定义事件，事件优先级为HIGHlet event: emitter.InnerEvent = {eventId:  eventId,priority: emitter.EventPriority.HIGH};// 发送事件emitter.emit(event, eventData);
}export const BASE_URL = `${Constants.BASE_SERVER}`;// 处理40开头的错误
export function errorHandler(error: CommonType) {if (error instanceof AxiosError) {switch (error.status) {// 401: 未登录case 401:break;case 403: //无权限未登录// 弹出登录页let eventData: emitter.EventData = {data: {isShow: true}};sendEmitter(Constants.EVENT_LOGIN_PRESENT, eventData)break;// 404请求不存在case 404:showToast("网络请求不存在")break;// 其他错误，直接抛出错误提示default:showToast(error.message)}}
}// 创建实例
const service: AxiosInstance = axios.create({baseURL: '',timeout: Constants.HTTP_READ_TIMEOUT, //超时时间withCredentials: true, // 跨域请求是否需要携带 cookieheaders: {  // `headers` 是即将被发送的自定义请求头'Content-Type': 'application/json;charset=utf-8'}
})let caresPreference: CaresPreference = CaresPreference.getInstance();
// 请求拦截器
service.interceptors.request.use(async(config:InternalAxiosRequestConfig) => {let Cookie: string = '';const cookie = await caresPreference.getValueAsync<string>('APP_Cookies');if(cookie){Cookie = cookie;}// 由于存储的cookie是这样的‘SSOSESSION=OWEwMTBlOTktNjQ2Yy00NDQ1LTkyMTctZTc3NWY2Nzg5MGM2; Path=/; HttpOnly’
// axios网络框架携带的cookie要这种SSOSESSION=OWEwMTBlOTktNjQ2Yy00NDQ1LTkyMTctZTc3NWY2Nzg5MGM2
// 接口才能请求通过（在cookie设置这里卡了挺长时间，鸿蒙自带的http请求带上Path=/; HttpOnly是可以请求通过的，axios要去掉Path=/; HttpOnly）config.headers['Cookie'] = String(Cookie).split(';')[0];return config;}, (error:AxiosError) => {console.info('全局请求拦截失败', error);Promise.reject(error);
});// 响应拦截器
service.interceptors.response.use((res:AxiosResponse)=> {console.info('响应拦截====',JSON.stringify(res))const config:AxiosRequestConfig = res.config;// 获取登录接口cookie，并进行存储if(config?.url && config?.url.includes('login') && `${JSON.stringify(res.headers['set-cookie'])}`.includes('SSOSESSION')){let urlObj = url.URL.parseURL(config?.baseURL);let cookies:CommonType = res.headers['set-cookie'] as CommonType;if(cookies){CookieManager.saveCookie(urlObj.host, String(cookies))}let sss = CookieManager.getCookies()console.info(urlObj.host + sss)caresPreference.setValueAsync('APP_Cookies', res.headers['set-cookie']).then(() => {console.info('存储cookie：' + res.headers['set-cookie']);})return Promise.resolve(res.data);}if(res.status === 200){// 错误返回码if ( ['40001','40002','40003'].includes(res.data.code)) {showToast(res.data.message)} else {Promise.resolve(res.data);}}return res.data;}, (error:AxiosError)=> {console.info("AxiosError",JSON.stringify(error.response))errorHandler(error.response as AxiosResponse)return Promise.reject(error);
});// 导出 axios 实例
export default service;

Common.ets

export { CsPreference } from './CsPreference';
export { CookieManager } from './CookieManager';

CsPreference.ets
本地信息存储

import { common } from '@kit.AbilityKit';
import { preferences } from '@kit.ArkData';const PREFERENCES_NAME: string = 'CS_PREFERENCES';export class CSPreference {private preferences: preferences.Preferences;private context = getContext(this) as common.UIAbilityContext;private static instance: CsPreference;constructor() {this.preferences = preferences.getPreferencesSync(this.context, { name: PREFERENCES_NAME })}public static getInstance(): CsPreference {if (!CsPreference.instance) {CsPreference.instance = new CsPreference();}return CsPreference.instance;}setValue(key: string, value: preferences.ValueType) {if (value != undefined) {this.preferences.putSync(key, value)this.preferences.flush()}}getValue(key: string): preferences.ValueType | undefined {return this.preferences?.getSync(key, undefined)}hasValue(key: string): boolean {return this.preferences.hasSync(key)}deleteValue(key: string) {this.preferences.deleteSync(key)this.preferences.flush()}async initPreference(storeName: string): Promise<void> {return preferences.getPreferences(this.context, storeName).then((preferences: preferences.Preferences) => {this.preferences = preferences;});}async setValueAsync<T>(key: string, value: T): Promise<void> {if (this.preferences) {this.preferences.put(key, JSON.stringify(value)).then(() => {this.saveUserData();})} else {this.initPreference(PREFERENCES_NAME).then(() => {this.setValueAsync<T>(key, value);});}}async getValueAsync<T>(key: string): Promise<T | null> {if (this.preferences) {return this.preferences.get(key, '').then((res: preferences.ValueType) => {let value: T | null = null;if (res) {value = JSON.parse(res as string) as T;}return value;});} else {return this.initPreference(PREFERENCES_NAME).then(() => {return this.getValueAsync<T>(key);});}}async hasValueAsync(key: string): Promise<boolean> {if (this.preferences) {return this.preferences.has(key);} else {return this.initPreference(PREFERENCES_NAME).then(() => {return this.hasValue(key);});}}async deleteValueAsync(key: string): Promise<void> {if (this.preferences) {this.preferences.delete(key).then(() => {this.saveUserData();});} else {this.initPreference(PREFERENCES_NAME).then(() => {this.deleteValue(key);});}}saveUserData() {this.preferences?.flush();}
}

CookieManager.ets
cookie 全局同步

import { CsPreference } from './CsPreference'const GLOBAL_COOKIE: string = "cs_global_cookie"export class CookieManager {static removeCookie(host: string) {let arr = CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>if (arr) {let filteredArray = arr.filter((item)=>{JSON.parse(item).host != host})CsPreference.getInstance().setValue(GLOBAL_COOKIE, filteredArray)}}static saveCookie(host: string, cookie: string) {CookieManager.removeCookie(host)let obj: Record<string, Object> = {};obj["host"] = host;obj["cookie"] = cookie;let arr = CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>if (arr == undefined) {arr = new Array<string>()}arr.push(JSON.stringify(obj))CsPreference.getInstance().setValue(GLOBAL_COOKIE, arr)}static getCookies(): Array<string>{return CsPreference.getInstance().getValue(GLOBAL_COOKIE) as Array<string>}}