HarmonyOS Next 系列之HTTP请求封装和Token持久化存储（四）
系列文章目录
HarmonyOS Next 系列之省市区弹窗选择器实现（一）
HarmonyOS Next 系列之验证码输入组件实现（二）
HarmonyOS Next 系列之底部标签栏TabBar实现（三）
HarmonyOS Next 系列之HTTP请求封装和Token持久化存储（四）
文章目录
- 系列文章目录
- 前言
- 一、实现设计
- 二、代码实现
- 1.http请求工具类request.ets
- 2.token持久化存取
- 3.页面使用
前言
HarmonyOS Next（基于API11）封装一个http请求工具类，自动拦截token失效跳转登录页，以及token持久化存取方案。
一、实现设计
- 对于接口请求我们最关心两个东西，一个是请求参数另一个是接收服务器返回的数据
（1）请求参数最常设置的有：
请求链接url、请求方式method（post,get等）、请求参数data、请求数据类型Content-Type、登录凭证token
其中token可从本地持久化读取无需传入，剩下四个可设计为动态传参
//接口入参数据类型
interface RequestParams {url: string //请求链接method?: http.RequestMethod //请求方式data?: Object //请求额外数据headerContentType?: string //请求数据类型
}
（2）返回数据一般是个对象 常见固定字段有：
code:状态码 ，message:接口响应说明 ，data:返回数据
故接口返回数据类型可定义为：
//接口请求返回数据类型
interface ResponseResult {code: number //状态码message: string //处理信息data: Object | null //返回数据
}
ps:根据实际需要也可按需添加字段
对于返回数据code状态码一般定义：
1、200为请求成功
2、401 token失效（无效或缺失）
3、其他情况归为请求失败
所以对于接口返回数据可根据code值分三种情况处理例如：
if(code==200){//请求成功//返回数据
}
else if(code==401){//token失效//拦截跳转到登录页router.replaceUrl({url: "/pages/login"})
}
else{//请求失败}
ps:当然状态码也可根据实际定义修改
- Token持久化存储
为了配合登录方案实现，方便在EntryAbility使用token，我们这里选择了Preferences作为存储方案。
最后，熟悉web开发的同学都知道web项目中习惯把接口定义放置在api文件夹下统一管理，然后在页面引入使用，再此沿用该开发习惯，方便后期维护。
二、代码实现
目录结构：
1.http请求工具类request.ets
封装一个http请求工具类文件，默认导出一个请求函数返回Promise(接口返回数据)
utils/request.ets
import http from '@ohos.net.http';
import { BusinessError } from '@ohos.base';
import promptAction from '@ohos.promptAction'
import { getToken } from './index'
import router from '@ohos.router';//baseURL接口域名
const BASEURL: string = "https://xxxxxxx.com"
//登录页路由
const LOGINPAGEURL = 'pages/common/login'//接口入参数据接口
interface RequestParams {url: stringmethod?: http.RequestMethoddata?: ObjectheaderContentType?: string
}//接口请求返回数据类
class ResponseResult {code: number //状态码message: string //处理信息data: Object | null //返回数据constructor(code?: number, message?: string, data?: Object | null | undefined) {this.code = code ?? 0this.message = message ?? ''this.data = data ?? null}
}/**** @param params:接口请求参数（object类型）* {* url :请求连接* method ：请求方法* data ：请求数据* headerContentType ：请求头发送的数据格式* }* @returns Promise<ResponseResult>*/
export default function request(params: RequestParams): Promise<ResponseResult> {return new Promise(async (resolve: (res: ResponseResult) => void, reject: (res: ResponseResult | string | BusinessError | http.HttpResponse) => void) => {//请求头contentTypelet contentType: string = params.headerContentType || 'application/json' //默认提交数据类型为application/json//请求数据datalet requestData: Object | undefined = params.data;//application/x-www-form-urlencoded类型参数处理成key&value形式if (contentType === 'application/x-www-form-urlencoded') {if (typeof params.data === 'object') {requestData = Object.entries(requestData as object).reduce((prev: string, cur: Array<Object>) => {return (prev && `${prev}&`) + `${cur[0]}=${cur[1]}`}, '')}}//从本地存储获取tokenlet token: string = await getToken()let httpRequest = http.createHttp();httpRequest.request(BASEURL + params.url, {method: params.method ?? http.RequestMethod.GET, //默认get方法header: {'Content-Type': contentType,token},extraData: requestData,readTimeout: 30000,connectTimeout: 30000}, (err: BusinessError, data: http.HttpResponse) => {if (!err) {//请求成功if (data.responseCode === 200) {let res: ResponseResult = JSON.parse(`${data.result}`);let response = new ResponseResult(res.code, res.message, res.data)//状态码code=200表示请求成功,状态码可根据实际接口文档修改if (res.code === 200) {resolve(response);}//状态码code=401表示token失效,状态码可根据实际接口文档修改else if (res.code === 401) { //跳转登录页router.clear() //清空历史页面//跳转到登录页router.replaceUrl({url: LOGINPAGEURL})}//其他情况接口异常else {showToast(response.message)reject(response);}}//请求失败else {showToast()reject(data)}}//请求失败else {showToast(err.message)reject(err)}// 取消订阅HTTP响应头事件httpRequest.off('headersReceive');// 当该请求使用完毕时，主动销毁该JavaScript Object。httpRequest.destroy();})})
}//弹窗提示
const showToast = (message?: string) => {promptAction.showToast({message: message || '请求出错',duration: 2000})
}说明：
（1）定义了接口前缀（域名+端口号?+通用匹配符？） BASEURL：可根据实际修改
（2）定义了登录页面路由 LOGINPAGEURL token失效跳转使用 ：可根据实际修改
（3）函数request入参是个对象，包含如下属性
{url :请求连接method ?：请求方法data ?：请求数据headerContentType? ：请求头发送的数据格式}
method不传默认get方式，headerContentType 不传默认application/json
当contetn-type为 “application/x-www-form-urlencoded” ， data请求参数 自动处理成key&value形式
（4）请求结果返回Promise
{code: number //状态码message: string //处理信息data: Object | null //返回数据
}
当code=200，promise返回接口数据
当code=401 token失效自动跳转登录页，
当code其他值表示请求失败，showToast显示接口message字段文字
（5）请求头默认添加token数据，从本地存储读取
2.token持久化存取
（1）entryability/EntryAbility.ets
import dataPreferences from '@ohos.data.preferences';
....
....
....onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {globalThis.getPreferences = () => {let preferences: Promise<dataPreferences.Preferences> = dataPreferences.getPreferences(this.context, "appStore")return preferences}}
EntryAbility. onCreate周期函数内给全局变量globalThis添加getPreferences 属性方法，方便快速获取Preferences实例 ，添加到globalThis是为了后续页面开发或者工具类使用Preferences
（2）utils/index.ets 工具类
import dataPreferences from '@ohos.data.preferences';
//获取token
export const getToken: Function = async () => {try {let preferences: dataPreferences.Preferences = await globalThis.getPreferences()return preferences.getSync('token', '')}catch (e) {}return ''
}//设置token并本地持久化存储
export const setToken: Function = async (value: string) => {try {let preferences: dataPreferences.Preferences = await globalThis.getPreferences()preferences.putSync('token', encodeURIComponent(value))await preferences.flush()}catch (e) {console.log(JSON.stringify(e), 'e')}
}
在工具类index.ets封装2个方法（getToken，setToken），分别为获取token值和设置token值，其中setToken在登录成功获取到token值时候调用存入本地持久化
3.页面使用
新建api文件夹、新建与页面同名的ets文件写入api定义
api/home.ets
import http from '@ohos.net.http'
import request from '../utils/request'class params{storeId:string=''
}
//获取首页数据
export function getHomeData(data:params){return request({url:"/api/store/home",method:http.RequestMethod.POST, //不传默认GETdata,headerContentType:'application/x-www-form-urlencoded' //不传默认application/json})
}//其他接口
export function xxxxx(data:params){return request({url:"xxxxxxxx",data,})
}
......
......
......页面引入
pages/Home.ets
import {getHomeData} from "../api/home"
@Entry
@Component
struct Home{aboutToAppear(): void {getHomeData({storeId:'17815455885'}).then(res=>{console.log(JSON.stringify(res),'接口返回数据')}}
}
运行结果
