ArkTs 网络请求注意事项

此篇以对操作mysql为例

情景一  post请求传递数据

import http from '@ohos.net.http';
let httpRequest = http.createHttp();
// 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息
// 从API 8开始，使用on('headersReceive', Callback)替代on('headerReceive', AsyncCallback)。 8+
httpRequest.on('headersReceive', (header) => {
  console.info('header: ' + JSON.stringify(header));
});
//根据后端字段建类
class CourseDetails {
  coursename: string;
  teacher: string;
  classroom: string;

  constructor(coursename: string, teacher: string, classroom: string) {
    this.coursename = coursename;
    this.teacher = teacher;
    this.classroom = classroom;
  }
}  

@Entry
@Component
struct AxiosPage {
 //创建实例
  courseDetails: CourseDetails = new CourseDetails('软工', '王老师', '206');
//eg:接收返回的数据
  @State Return:string = 'error'

  get() {
//转json用于发送
    const requestBody = JSON.stringify(this.courseDetails);

    httpRequest.request(
      "http://localhost:8080/newcourse",
      {
        method: http.RequestMethod.POST,
        header: {
          'Content-Type': 'application/json'
        },
        // 使用JSON.stringify将对象转换为JSON字符串传递给后端
        extraData: requestBody,
        expectDataType: http.HttpDataType.STRING,
        usingCache: true,
        priority: 1,
        connectTimeout: 60000,
        readTimeout: 60000,
        usingProtocol: http.HttpProtocol.HTTP1_1,
      }, (err, data) => {
      if (!err) {
        console.info('Result:' + JSON.stringify(data.result));
        console.info('code:' + JSON.stringify(data.responseCode));
        console.info('header:' + JSON.stringify(data.header));
        console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
        //告诉编译器这是json字符串，然后赋值渲染
        this.Return = data.result as string
      } else {
        console.info('error:' + JSON.stringify(err));
        httpRequest.off('headersReceive');
        httpRequest.destroy();
      }
    }
    );
  }

  build() {
    Row() {
      Column() {
        Text(this.Return)
        Button('发送')
          .onClick(() => this.get())
      }
      .width('100%')
    }
    .height('100%')
  }
}

情景二 get获取List

import http from '@ohos.net.http';
let httpRequest = http.createHttp();
// ... (订阅HTTP响应头部分不变)
//根据后端字段建类
class BookDetails {
  id: number;
  bookId: number;
  bookName: string;
  author: string;
  publishingHouse: string;
  num: number;

  constructor(item: any) {
    this.id = item.id;
    this.bookId = item.bookId;
    this.bookName = item.bookName;
    this.author = item.author;
    this.publishingHouse = item.publishingHouse;
    this.num = item.num;
  }
}

@Entry
@Component
struct AxiosPage {
//创建对象数组
  @State niao: BookDetails[] = []

  async get() {
    httpRequest.request(
      "http://localhost:8080/book",
      {
        method: http.RequestMethod.GET,
        header: {
          'Content-Type': 'application/json'
        },
        // GET请求不需要传递extraData
        usingCache: true,
        priority: 1,
        connectTimeout: 60000,
        readTimeout: 60000,
        usingProtocol: http.HttpProtocol.HTTP1_1,
      }, (err, data) => {
      if (!err) {
        console.info('Result:' + JSON.parse(JSON.stringify(data.result)));
        const res = JSON.parse(data.result as string)  //一般后端会返回json格式，转对象数组赋值this.niao = res
      } else {
        console.info('error:' + JSON.stringify(err));
        httpRequest.off('headersReceive');
        httpRequest.destroy();
      }
    }
    );
  }

  build() {
    Column({ space: 12 }) {
      Row() {
        List() {
          ForEach(this.niao, (item) => {
            ListItem() {
              Row() {
                Text(item.bookName)
                Text(item.author)
                ......
              }
            }
          })
        }
        .width('100%')
        .height('100%')     //循环渲染

      }
      .backgroundColor(Color.Red)
      .width('100%')
      .height('50%')

      Button('发送')
        .onClick(() => this.get())
    }
    .width('100%')
  }
}




配套springboot代码

@GetMapping
public List<Book> getBook(){
    return bookService.list();
}