【HarmonyOS】鸿蒙开发之HTTP网络请求—

【HarmonyOS】鸿蒙开发之HTTP网络请求——第5章

HTTP网络请求封装

network/request.ets

import { configInterface } from './type'
import http from '@ohos.net.http'
import { getToken } from '../utils/storage'//网络请求封装
export const request = (config:configInterface)=>{let httpRequest:http.HttpRequest = http.createHttp()let method:http.RequestMethod = config.method.toLowerCase()=='get'?http.RequestMethod.GET:http.RequestMethod.POSTlet header = {}let Token = getToken()if(config.headers){header={...config.headers,'X-CSRF-TOKEN': `VueCms_xg ${Token}`,'Authorization': `Bearer vuecms.cn`,}}else if(!config.headers){config.headers={"Content-Type": "application/json"}}console.log('http://localhost:3000' + config.url,"32333333333");let response = httpRequest.request(// 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定// config.url,"http://localhost:3000"+config.url,{method, // 可选，默认为http.RequestMethod.GET// 开发者根据自身业务需要添加header字段header,extraData:{...config.data},expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型});return response.then((res:any)=>{let resultData:any = {}// 取消订阅HTTP响应头事件httpRequest.off('headersReceive');// 当该请求使用完毕时，调用destroy方法主动销毁httpRequest.destroy();let result:any = JSON.parse(res.result);console.log(result.code);if (result.code === 403) {console.log("登录状态已过期，您可以继续留在该页面，或者重新登录");// model.handleMsgBox('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {//   confirmButtonText: '重新登录',//   cancelButtonText: '取消',//   type: 'warning'// }).then(() => {//   userStore.LogOut().then(() => {//     location.href = "/login";//   })// })}resultData = {code:result.code,data:result.data,message:result.message,}return Promise.resolve(resultData)}).catch(err=>{console.log(JSON.stringify(err),"errrrrr111rrr");// 取消订阅HTTP响应头事件httpRequest.off('headersReceive');// 当该请求使用完毕时，调用destroy方法主动销毁。httpRequest.destroy();return new Promise((resolve,reject)=>{let res = {code:err.code,data:"",message:err.message,}reject(res)})})
}

network/type/index.ts 网络请求文件的typescript文件

export type methodsData = "post" | "get"
interface downloadParamsInterface{url: stringparams?: anyfilename: stringisPost?: boolean
}
export interface configInterface{url: stringdata?: anymethod?: methodsDataheaders?: anydownloadData?:downloadParamsInterface
}
export interface responseInterface {data:anymessage:stringcode:Number
}

实战项目使用

登录页的网络请求文件
ets/network/login/index.ts
在这里插入图片描述

登录页使用
ets/pages/login/index.ets
在这里插入图片描述

注意:

浏览器暂不支持网络请求，只能在模拟器或真机进行
请求需要申请ohos.permission.INTERNET 权限
网络请求限定并发个数为100，超过这一限制的后续请求会失败。
默认支持https，如果要支持http，需要在module.json5里添加network标签

✨ $\textcolor{gray}{踩坑不易，还希望各位大佬支持一下}$

📃 $\textcolor{green}{个人主页：}$ 沉默小管

📃 $\textcolor{green}{个人网站：}$ 沉默小管

📃 $\textcolor{green}{个人导航网站：}$ 沉默小管导航网

📃 $\textcolor{green}{我的开源项目：}$ vueCms.cn

🔥 $\textcolor{green}{技术交流QQ群：837051545}$

👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教