从零开始学Hm（十）HTTP请求

需要在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