1、鴻蒙中如何進(jìn)行網(wǎng)絡(luò)請求

1.1 三方庫請求

• @ohos/axios

• @ohos/retrofit

• @ohos/httpclient

1.2 鴻蒙原生請求

• @ohos.net.http

2、ArkTs請求模塊@ohos.net.http

本模塊提供HTTP數(shù)據(jù)請求能力。應(yīng)用可以通過HTTP發(fā)起一個數(shù)據(jù)請求，支持常見的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。

3、@ohos.net.http請求流程

1. http.createHttp（創(chuàng)建請求實例任務(wù)）；

2. request（請求）；

3. destroy（中斷請求）；

4. on（訂閱HTTP Response Header 事件）；

5. off（取消訂閱HTTP Response Header 事件）；

6. once（訂閱HTTP Response Header 事件，但是只觸發(fā)一次）；

4、預(yù)覽效果

5、封裝@ohos.net.http

5.1 函數(shù)式

5.1.1 封裝

import http from '@ohos.net.http';

export interface httpOptions {
  timeOut?: number;
  ContentType?: string;
  header?: Object;
  state?: string;
  callBack?: Function;
}

const HTTP_READ_TIMEOUT = 60000;
const HTTP_CONNECT_TIMEOUT = 60000;
const CONTENT_TYPE = 'application/json'

export function httpRequest(
    url: string,
    method: http.RequestMethod = http.RequestMethod.GET,
    params?: string | Object | ArrayBuffer,
    options?: httpOptions
): Promise<ResponseResult> {
  const request = http.createHttp();
  // 處理狀態(tài)
  if(options?.state) {
    switch (options.state) {
      case 'on':
        request.on('headersReceive', (header) => options.callBack(header));
        break;
      case 'once':
        request.on('headersReceive', (header) => options.callBack(header));
        break;
      case 'off':
        request.off('headersReceive');
        break;
      case 'destroy':
        request.destroy();
        break;
      default:
        break;
    }
    return;
  }

  // 處理請求
  const responseResult = request.request(url, {
    // 超時時間
    readTimeout: options?.timeOut || HTTP_READ_TIMEOUT,
    connectTimeout: options?.timeOut || HTTP_CONNECT_TIMEOUT,
    method,
    extraData: params || {},
    header: options?.header || {
      'Content-Type': options?.ContentType || CONTENT_TYPE
    },
  });
  let serverData: ResponseResult = new ResponseResult();
  // Processes the data and returns.
  return responseResult.then((data: http.HttpResponse) => {
    if (data.responseCode === http.ResponseCode.OK) {
      // Obtains the returned data.
      let result = `${data.result}`;
      let resultJson: ResponseResult = JSON.parse(result);

      serverData.data = resultJson;
      serverData.code = 'success';
      serverData.msg = resultJson?.msg;
    } else {
      serverData.msg = `error info & ${data.responseCode}`;
    }
    return serverData;
  }).catch((err) => {
    serverData.msg = `${err}`;
    return serverData;
  })
}

export class ResponseResult {
  /**
   * Code returned by the network request: success, fail.
   */
  code: string;

  /**
   * Message returned by the network request.
   */
  msg: string | Resource;

  /**
   * Data returned by the network request.
   */
  data: string | Object | ArrayBuffer;

  constructor() {
    this.code = '';
    this.msg = '';
    this.data = '';
  }
}

export default httpRequest;

5.1.2 使用

import httpRequest from '../../utils/requestHttp';

interface resultType {
  resultcode: string;
  reason: string;
  result: resultValType | null;
  error_code: string;
}

interface resultValType {
  city: string;
  realtime: realtimeType;
  future: Object;
}

interface realtimeType {
  temperature: string;
  humidity: string;
  info: string;
  wid: string;
  direct: string;
  power: string;
  aqi: string;
}

@Extend(Text) function textStyle() {
  .fontColor(Color.White)
  .margin({
    left: 12
  })
}

@Entry
@Component
struct httpPages {
  @State html: resultValType = {
    city: '',
    realtime: {
      temperature: '',
      humidity: '',
      info: '',
      wid: '',
      direct: '',
      power: '',
      aqi: '',
    },
    future: undefined
  };
  @State url: string = "http://apis.juhe.cn/simpleWeather/query?key=397c9db4cb0621ad0313123dab416668&city=西安";

  @Styles weatherStyle() {
    .width('100%')
    .padding(6)
    .backgroundColor(Color.Green)
    .borderRadius(8)
  }

  build() {
    Column({space: 10}) {
      Button("請求數(shù)據(jù)")
        .onClick(() => {
          this.httpRequest();
        })
      Column() {
        Text(this.html.city || '--').textStyle().fontWeight(FontWeight.Bold)
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.temperature || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.humidity || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.info || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.wid || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.direct || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.power || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
      Column() {
        Text(this.html.realtime.aqi || '--').textStyle()
      }.weatherStyle().alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }

  private httpRequest() {
    httpRequest(this.url).then(res => {
      const data: resultType = res.data as resultType;
      this.html = data.result;
      console.info('網(wǎng)絡(luò)結(jié)果:'+JSON.stringify(data));
    });
  }
}

5.2?泛型式

5.2.1 封裝

import http from '@ohos.net.http';

// 1、創(chuàng)建RequestOption.ets 配置類
export interface RequestOptions {
  url?: string;
  method?: RequestMethod; // default is GET
  queryParams ?: Record<string, string>;
  extraData?: string | Object | ArrayBuffer;
  header?: Object; // default is 'content-type': 'application/json'
}

export enum RequestMethod {
  OPTIONS = "OPTIONS",
  GET = "GET",
  HEAD = "HEAD",
  POST = "POST",
  PUT = "PUT",
  DELETE = "DELETE",
  TRACE = "TRACE",
  CONNECT = "CONNECT"
}

/**
 * Http請求器
 */
export class HttpCore {
  /**
   * 發(fā)送請求
   * @param requestOption
   * @returns Promise
   */
  request<T>(requestOption: RequestOptions): Promise<T> {
    return new Promise<T>((resolve, reject) => {
      this.sendRequest(requestOption)
        .then((response) => {
          if (typeof response.result !== 'string') {
            reject(new Error('Invalid data type'));

          } else {
            let bean: T = JSON.parse(response.result);
            if (bean) {
              resolve(bean);
            } else {
              reject(new Error('Invalid data type,JSON to T failed'));
            }

          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  private sendRequest(requestOption: RequestOptions): Promise<http.HttpResponse> {
    // 每一個httpRequest對應(yīng)一個HTTP請求任務(wù)，不可復(fù)用
    let httpRequest = http.createHttp();

    let resolveFunction, rejectFunction;
    const resultPromise = new Promise<http.HttpResponse>((resolve, reject) => {
      resolveFunction = resolve;
      rejectFunction = reject;
    });

    if (!this.isValidUrl(requestOption.url)) {
      return Promise.reject(new Error('url格式不合法.'));
    }

    let promise = httpRequest.request(this.appendQueryParams(requestOption.url, requestOption.queryParams), {
      method: requestOption.method,
      header: requestOption.header,
      extraData: requestOption.extraData, // 當(dāng)使用POST請求時此字段用于傳遞內(nèi)容
      expectDataType: http.HttpDataType.STRING // 可選，指定返回數(shù)據(jù)的類型
    });

    promise.then((response) => {
      console.info('Result:' + response.result);
      console.info('code:' + response.responseCode);
      console.info('header:' + JSON.stringify(response.header));

      if (http.ResponseCode.OK !== response.responseCode) {
        throw new Error('http responseCode !=200');
      }
      resolveFunction(response);

    }).catch((err) => {
      rejectFunction(err);
    }).finally(() => {
      // 當(dāng)該請求使用完畢時，調(diào)用destroy方法主動銷毀。
      httpRequest.destroy();
    })
    return resultPromise;
  }


  private appendQueryParams(url: string, queryParams: Record<string, string>): string {
    // todo 使用將參數(shù)拼接到url上
    return url;
  }

  private isValidUrl(url: string): boolean {
    //todo 實現(xiàn)URL格式判斷
    return true;
  }
}

// 實例化請求器
const httpCore = new HttpCore();


export class HttpManager {
  private static mInstance: HttpManager;

  // 防止實例化
  private constructor() {
  }

  static getInstance(): HttpManager {
    if (!HttpManager.mInstance) {
      HttpManager.mInstance = new HttpManager();
    }
    return HttpManager.mInstance;
  }

  request<T>(option: RequestOptions): Promise<T> {
    return httpCore.request(option);
  }
}

export default HttpManager;

5.2.2 使用

import httpManager, { RequestMethod } from '../../utils/requestManager';

interface TestBean {
  userId: number,
  id: number,
  title: string,
  completed: boolean
}

private handleClick() {
    httpManager.getInstance()
      .request<TestBean>({
        method: RequestMethod.GET,
        url: 'https://jsonplaceholder.typicode.com/todos/1' //公開的API
      })
      .then((result) => {
        this.text = JSON.stringify(result);
        console.info(JSON.stringify(result));
      })
      .catch((err) => {
        console.error(JSON.stringify(err));
      });
  }

文章來源地址http://www.zghlxwxcb.cn/news/detail-815627.html

到了這里，關(guān)于【HarmonyOS開發(fā)】ArkTs使用Http封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！