鸿蒙开发 - 封装Http请求

一. 官方用例

        鸿蒙sdk中提供了http请求的方法（@ohos.net.http），如下：

        1.先导入模块，在需要调用的地方进行导入即可：

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

1. 官方提供的完整示例代码如下（官方地址：@ohos.net.http (数据请求)-网络管理-ArkTS接口参考-ArkTS API参考 | 华为开发者联盟 (huawei.com)）：

// 引入包名
import http from '@ohos.net.http';

// 每一个httpRequest对应一个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));
});
httpRequest.request(
    // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
    "EXAMPLE_URL",
    {
        method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
        // 开发者根据自身业务需要添加header字段
        header: {
            'Content-Type': 'application/json'
        },
        // 当使用POST请求时此字段用于传递内容
        extraData: {
            "data": "data to send",
        },
        expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
        usingCache: true, // 可选，默认为true
        priority: 1, // 可选，默认为1
        connectTimeout: 60000, // 可选，默认为60000ms
        readTimeout: 60000, // 可选，默认为60000ms
        usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
    }, (err, data) => {
        if (!err) {
            // data.result为HTTP响应内容，可根据业务需要进行解析
            console.info('Result:' + JSON.stringify(data.result));
            console.info('code:' + JSON.stringify(data.responseCode));
            // data.header为HTTP响应头，可根据业务需要进行解析
            console.info('header:' + JSON.stringify(data.header));
            console.info('cookies:' + JSON.stringify(data.cookies)); // 8+
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁
            httpRequest.destroy();
        } else {
            console.info('error:' + JSON.stringify(err));
            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁。
            httpRequest.destroy();
        }
    }
);

1. 可以从上述代码看出，我们主要操作的只有三个参数：
   1. url：接口地址
   2. method：请求方式：Get / Post
   3. extraData：请求参数，Get传参也可以使用

 二. 封装http请求

我们从示例代码也可以看出，代码量还是很多的，所以我们需要进行封装，以便我们之后的操作，其实封装也简单，原理和web或者其他小程序的接口封装一样，我这里也写了一个封装流程，大家可以参考一下，觉得有优化的地方也欢迎提出来哈哈！！

1.  我们在ets目录下创建一个utils文件夹，主要用来存放一些我们封装的实体类或者方法，如下：

2.  我们在这个目录下创建一个request的ets文件，文件命名大家按自己喜好就可以了，这个文件就是我们存放封装http的地方，代码如下：

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))
})

/**
 * 封装好的公共请求方法
 * @param url 请求路径
 * */
function request (url: string, method: string,data?: object ): any {
   return new Promise((resolve, reject) => {
        httpRequest.request(
            // 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
            "http://API-IP{BaseUrl}" + url,
            {
                // 根据method判断请求方式，一般就Get或者Post，如果遵循Reultful风格的话，大家在根据实际情况更改就行
                method: method.toLowerCase() === "get" ? http.RequestMethod.GET: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
                // 开发者根据自身业务需要添加header字段
                header: {
                    'Content-Type': 'application/json'
                },
                // 当使用POST请求时此字段用于传递内容
                extraData: data,
                expectDataType: http.HttpDataType.OBJECT, // 可选，指定返回数据的类型
                usingCache: true, // 可选，默认为true
                priority: 1, // 可选，默认为1
                connectTimeout: 60000, // 可选，默认为60000ms
                readTimeout: 60000, // 可选，默认为60000ms
                usingProtocol: http.HttpProtocol.HTTP1_1, // 可选，协议类型默认值由系统自动指定
            }, (err, res) => {
            // 返回结果，这里result我本来是打算用个interface规定类型的，但为了示例代码让大家不会报错，这里就用any代替了
            let result = null;

            // 取消订阅HTTP响应头事件
            httpRequest.off('headersReceive');
            // 当该请求使用完毕时，调用destroy方法主动销毁
            httpRequest.destroy();
            if(err){
                // 弹出警告框
                AlertDialog.show({
                    title: "警告",
                    message: err.message,
                    confirm: {
                        value: "确认",
                        action: () => {

                        },
                    }
                })
                // 这里的result格式大家根据自己需求进行更改就可以了
                result = {
                    code: err.code,
                    message: err.message
                };
                reject(result);
            }else{
                result = res.result;
            }
            resolve(result);
        }
        )
    });
}

export default request;

 3. request文件封装好后，我们就可以针对get和post等请求方式分别封装一下方法（这一步看个人需要吧，就只是稍微简化了一下后续的封装，起到一个类似过渡的作用）步骤如下：

        a. 在ets目录下，新建一个api文件夹，用来存放封装接口的地方

 

        b.  在目录下新建一个index.ets，用于过度请求方式的地方,代码如下:

import request from "../utils/request"

/**
 * 请求类
 * */
class Request{
 get(url, params?): any{
  return request(url, "get");
 }

 post(url, data?): any{
  return request(url, "post", data);
 }
}

export default new Request();

         c. 我们再在这个目录中新建一个apis的文件夹，存放接口请求的文件，然后我这里建了一个user.ets的文件，封装了一个请求方法，代码如下:

import Request from "../index"

/**
 * 用户请求
 * */
class UserService{
 // 判断是否登录
 checkLogin(): any{
  return Request.get("Users/GetLocalUser");
 }
}

export default new UserService();

        d. 到这里我们的方法就差不多封装完了，我们现在只需去页面中调用就可以了，我这里提供示例代码如下:

// 当前文件是我们的页面文件，所以导入地址大家根据实际情况调整就行
// 导入我们封装的请求类
import UserService from "../api/apis/user"

@Entry
@Component
struct Login {

  build() {
    Row() {
      Column() {
        // 登录按钮
        Button("Login in")
          .width(150)
          .height(50)
          .margin({ top: 30 })
          .backgroundColor("#6E34B8")
        .onClick(() => {
            // 在按钮点击的时候调用这个方法
          UserService.checkLogin().then(res => {}).catch(err => {})
          });
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

总结： 到这里我们的Http请求就封装好啦，看着感觉内容多，其实很简单的，大家可以一步一步看下来，实操一下就行了，觉得有需要优化的地方的话，欢迎大家提出来呀！！加油！hh^-^

补充一下 ： 为了能在设备中成功访问接口，我们需要在这个json文件中加上一句，否则设备是无权限访问接口的

    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
    ],