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

HTTP网络请求封装

network/request.ets

bash 复制代码
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.POST
  let 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文件

bash 复制代码
export type methodsData = "post" | "get"
interface downloadParamsInterface{
  url: string
  params?: any
  filename: string
  isPost?: boolean
}
export interface configInterface{
  url: string
  data?: any
  method?: methodsData
  headers?: any
  downloadData?:downloadParamsInterface
}
export interface responseInterface {
  data:any
  message:string
  code:Number
}

实战项目使用

登录页的网络请求文件

ets/network/login/index.ts

登录页使用

ets/pages/login/index.ets

注意:

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

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

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

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

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

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

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复

如有错误,请多多指教

相关推荐
2301_780789663 小时前
UDP和TCP的主要区别是什么
服务器·网络协议·web安全·网络安全·udp
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
一只栖枝5 小时前
HCIA-Security 认证精讲!网络安全理论与实战全掌握
网络·web安全·网络安全·智能路由器·hcia·it·hcia-security
FileLink跨网文件交换6 小时前
文件摆渡系统十大软件|文件摆渡系统如何构建网络安全呢?
网络
晨欣8 小时前
大型语言模型(LLM)在网络安全中最具商业价值的应用场景(Grok3 回答 DeepSearch模式)
网络·web安全·语言模型
有书Show9 小时前
个人IP的塑造方向有哪些?
网络·网络协议·tcp/ip
HHRL-yx9 小时前
C++网络编程 5.TCP套接字(socket)通信进阶-基于多线程的TCP多客户端通信
网络·c++·tcp/ip
迈威通信9 小时前
接口黑洞?破!安全堡垒?筑!冰火炼狱?战!MES7114W终极掌控
网络·安全
迷曳9 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
代码搬运媛10 小时前
HTTP REST API、WebSocket、 gRPC 和 GraphQL 应用场景和底层实现
websocket·http·graphql