问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问有网络请求封装的最佳实践分享吗？

头像
轻口味
    38.9k578413

    需要使用网络请求的场景很多，想要一个HTTP请求的工具类和Demo
    该Demo 能包含网络请求的工具类，Post 、Get 等方法的封装，回调的处理，以及文件上传等。
    希望能解决单个页面请求多个接口的问题，原生代码实现的话，代码会太多。

    HarmonyOSharmonyos
    阅读 720
    avatarAI BotBETA

    在网络请求封装方面，确实存在一些最佳实践，可以帮助你构建高效、可维护且易于使用的HTTP请求工具类。下面是一个基于这些实践的建议框架，以及一个简化的示例代码，用于展示如何封装GET和POST请求，包括回调处理和文件上传功能。这个示例将使用原生JavaScript（假设是在Node.js环境下，如果你是在浏览器环境中，可能需要使用fetch API或XMLHttpRequest）。

    网络请求封装的最佳实践

    1. 使用统一的请求方法：封装一个通用的函数来处理所有类型的HTTP请求（GET, POST, PUT, DELETE等），通过参数来区分请求类型。
    2. 配置管理：将请求的配置（如URL、请求头、超时时间等）作为参数传入，便于重用和灵活配置。
    3. 错误处理：确保网络请求的错误（如请求失败、超时等）能被妥善处理，并通过回调或Promise返回给调用者。
    4. 响应处理：统一处理响应数据，如自动转换JSON格式等，减少重复代码。
    5. 支持拦截器：虽然原生JavaScript不直接支持拦截器，但可以通过封装函数来实现请求前和响应后的“拦截”逻辑。
    6. 请求取消：在支持的情况下（如使用fetch的AbortController），实现请求取消功能。
    7. 缓存机制：对于GET请求，可以考虑实现缓存机制，以减少不必要的网络请求。

    示例代码

    以下是一个简化的Node.js环境下的HTTP请求工具类示例，使用axios库（一个基于Promise的HTTP客户端，易于使用且功能强大）来实现。如果你需要原生实现，请注意这个示例是基于库的。

    安装axios

    npm install axios

    HTTP请求工具类 (HttpClient.js)

    const axios = require('axios');

class HttpClient {
    static async get(url, config = {}) {
        try {
            const response = await axios.get(url, config);
            return response.data;
        } catch (error) {
            console.error('GET request failed:', error);
            throw error; // 可以选择抛出错误或进行其他错误处理
        }
    }

    static async post(url, data, config = {}) {
        try {
            const response = await axios.post(url, data, config);
            return response.data;
        } catch (error) {
            console.error('POST request failed:', error);
            throw error; // 同上
        }
    }

    // 可以继续添加PUT, DELETE等方法

    // 文件上传示例（使用FormData）
    static async uploadFile(url, formData) {
        try {
            const response = await axios.post(url, formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    ...formData.getHeaders() // 如果有getHeaders方法，用于获取额外的headers
                }
            });
            return response.data;
        } catch (error) {
            console.error('File upload failed:', error);
            throw error;
        }
    }
}

module.exports = HttpClient;

    使用示例

    const HttpClient = require('./HttpClient');

// 使用GET方法
HttpClient.get('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error(error));

// 使用POST方法
HttpClient.post('https://api.example.com/submit', { key: 'value' })
    .then(response => console.log(response))
    .catch(error => console.error(error));

// 文件上传（假设formData已经构建好）
const formData = new FormData();
formData.append('file', file); // file是File对象或Blob对象
HttpClient.uploadFile('https://api.example.com/upload', formData)
    .then(response => console.log(response))
    .catch(error => console.error(error));

    注意：如果你需要原生JavaScript实现，你需要使用fetch API（浏览器环境）或Node.js的http或https模块（配合流来处理文件上传等复杂场景）。

    1 个回答
    得票最新
    头像
    春暖花开
      18.4k28216
      ✓ 已被采纳

      分享一个简单的代码案例：
      1.创建一个工具类目录utils，在子目录下创建文件HttpUtil：

      import http from '@ohos.net.http'; 
export function httpRequestGet(url: string): Promise<ResponseResult> { 
  let httpRequest = http.createHttp(); 
  let responseResult = httpRequest.request(url, { 
    method: http.RequestMethod.GET, 
    readTimeout: Const.HTTP_READ_TIMEOUT, 
    header: { 
      'Content-Type': ContentType.JSON 
    }, 
    connectTimeout: Const.HTTP_READ_TIMEOUT, 
    extraData: {} 
  }); 
  let serverData: ResponseResult = new ResponseResult(); 
  // Processes the data and returns. 
  return responseResult.then((value: http.HttpResponse) => { 
    if (value.responseCode === Const.HTTP_CODE_200) { 
      // Obtains the returned data. 
      let result = `${value.result}`; 
      let resultJson: ResponseResult = JSON.parse(result); 
      if (resultJson.code === Const.SERVER_CODE_SUCCESS) { 
        serverData.data = resultJson.data; 
      } 
      serverData.code = resultJson.code; 
      serverData.msg = resultJson.msg; 
    } else { 
      serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`; 
    } 
    return serverData; 
  }).catch(() => { 
    serverData.msg = $r('app.string.http_error_message'); 
    return serverData; 
  }) 
}

      2.在需要的地方可以这样引用：import { httpRequestGet } from '../common/utils/HttpUtil';
      也可以参考使用官方的api，自己实现业务逻辑，文档参考:
      https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
      或者使用三方库，比如axios来实现，文档参考：https://ohpm.openharmony.cn/#/cn/detail/@ohos%2Faxios

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题