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
注意:
- 浏览器暂不支持网络请求,只能在模拟器或真机进行
- 请求需要申请ohos.permission.INTERNET 权限
- 网络请求限定并发个数为100,超过这一限制的后续请求会失败。
- 默认支持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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教