需要在modeule.json5文件中配置网络权限!!!
单独的实体类也单独创建一个文件夹
跟数据传输相关的单独创建一个model 把接口写在这个地方
创建http请求对象,不可复用
let httpRequest=http.createHttp()
发送网络请求并处理返回结果
//这里放接口
class ShopModel{
//将服务器地址定义为常量
baseURL:string='http://localhost:3000'
pageNo:number=1
getShowList():ShopInfo[]{
// 这个http请求对象 不可复用
let httpRequest=http.createHttp()
httpRequest.request(
// 请求发送出去之后不一定立刻就能收到返回结果 有可能网络延迟高 使用的异步
// 服务器请求地址 get delete在地址栏拼接 post put 字符串 json格式
`${this.baseURL}/shops?pageNo=${this.pageNo}&pageSize=3`,
{
// 这默认是get
method:http.RequestMethod.GET
}
)//执行成功的回调函数
// 获取到参数resp是个HttpResponse对象需要对他的状态码进行判断
.then(resp=>{
if (resp.responseCode===200) {
// 后端发来的结果在result中 是个json类型的字符串 可以使用tostring转成字符串
//resp.result.toString()
// 字符串需要转换成目标对象的数组 把json字符串转换为数组
// 此时方法缺少return 但是如果在回调函数中return 仅仅是在回调函数中有了返回值 外面的大方法还是没有返回值
JSON.parse(resp.result.toString())
}else {
// 失败之后输出失败的日志
console.log('查询失败 error:',JSON.stringify(resp))
}
})
// 出现异常 记录在日志中
.catch(error=>{
console.log('查询失败 error:',JSON.stringify(error))
})
}
}
把本地路径设为变量 方便修改
baseURL:string='http://localhost:3000'
在request方法中直接引用拼接在字符串中 ${this.baseURL} 后面需要补全页面路径以及需要传递的参数
回调函数 json格式的对象转字符串
JSON.stringify(error) 之后输出在日志内
注意
异步发送返回异步但是需要的对象可能现在还没有,所以需要返回Promise对象
//这里放接口
class ShopModel{
//将服务器地址定义为常量
baseURL:string='http://localhost:3000'
pageNo:number=1
// 接受未来的返回值
getShowList():Promise<ShopInfo[]> {
// 创建Promise对象 回调函数
return new Promise((resolve,reject)=>{
// 这个http请求对象 不可复用
let httpRequest=http.createHttp()
httpRequest.request(
// 请求发送出去之后不一定立刻就能收到返回结果 有可能网络延迟高 使用的异步
// 服务器请求地址 get delete在地址栏拼接 post put 字符串 json格式
`${this.baseURL}/shops?pageNo=${this.pageNo}&pageSize=3`,
{
// 这默认是get
method:http.RequestMethod.GET
}
)//执行成功的回调函数
// 获取到参数resp是个HttpResponse对象需要对他的状态码进行判断
.then(resp=>{
if (resp.responseCode===200) {
// 后端发来的结果在result中 是个json类型的字符串 可以使用tostring转成字符串
//resp.result.toString()
// 字符串需要转换成目标对象的数组 把json字符串转换为数组
// 此时方法缺少return 但是如果在回调函数中return 仅仅是在回调函数中有了返回值 外面的大方法还是没有返回值
//JSON.parse(resp.result.toString())
// 将查询结果
resolve(JSON.parse(resp.result.toString()))
// 添加日志
console.log('查询成功',resp.result)
}else {
// 失败之后输出失败的日志
console.log('查询失败 error:',JSON.stringify(resp))
reject('查询失败')
}
})
// 出现异常 记录在日志中
.catch(error=>{
console.log('查询失败 error:',JSON.stringify(error))
reject('查询失败')
})
})
}
}
将之前的方法放在Promise中 返回Promise对象 在Promise的回调函数中,回调函数中的执行结果需要告知给主方法,等我执行完之后将结果返回,resolve()执行成功返回,reject()执行失败返回
无论成功失败一定要添加日志!!!!!!!!!!!
这个类需要别人调用 可以提前在类内new对象 方便调用
const shopModel=new ShopModel();
export default shopModel as ShopModel
List属性
isLoading: boolean = false
.onReachEnd(()=>{
//当集合触底的时候会触发 但是会触底两次 一次是触底 一次是回弹
//创建一个标志位 boolean类型 用来标识 触底的时候改变
if(!this.isLoading){
//首先修改标识
this.isLoading=true
//同时将页数加1
ShopModel.pageNo++
//执行刷新方法
}
})
此时查询出来的集合会覆盖掉之前的查询结果,需要将数组进行拼接
//之前是 会覆盖
this.数组=数组
//修改
this.数组=this.数组.concat(查询出来的数组)
//执行完之后再将标识改为false为了下次进来还可以执行刷新方法
this.isLoading=false