HarmonyOS鸿蒙Next中JS网络请求封装

HarmonyOS鸿蒙Next中JS网络请求封装 本人从事iOS 开发工作，才从网课上自学的前端开发技术，代码写的可能太基础大神勿喷，有好的建议一起来探讨。

Api.js 文件

统一管理 域名和接口地址

export default {
    BaseUrl: "https://", //主域名
    login: "", //子接口名
}

Http.js文件

发起请求 GET POST， 其他请求方式查看api修改 请求方式参数

import fetch from '@system.fetch';
import Api from './Api';

export default {
    
    GET(url, params, sucessCallBack, failCallBack, baseUrl) {
        var that = this;
        var httpUrl = '';
        if (baseUrl) {
            httpUrl = baseUrl + url;
        } else {
            httpUrl = AutoaiHmsApi.BaseUrl + url;
        }
        
        console.info('发起GET请求');
        console.info('请求网址:' + httpUrl);
        console.info('请求参数:' + params)
        
        fetch.fetch({
            url: httpUrl,
            responseType: 'json',
            method: "GET",
            data: params,
            success: function(response) {
                console.info('请求返回结果:' + response.data);
                sucessCallBack(response.data);
            },
            fail: function(data, code) {
                console.info('请求失败 Code:' + code + "data:" + data)
                failCallBack(code, that.httpServiceErrorCode(code))
            },
            complete: function() {
                console.info('请求完成')
            }
        });
    },
    
    POST(url, params, sucessCallBack, failCallBack, baseUrl) {
        var that = this;
        var httpUrl = '';
        if (baseUrl) {
            httpUrl = baseUrl + url;
        } else {
            httpUrl = AutoaiHmsApi.BaseUrl + url;
        }
        
        console.info('发起POST请求');
        console.info('请求网址:' + httpUrl);
        console.info('请求参数:' + params)
        
        fetch.fetch({
            url: httpUrl,
            responseType: 'json',
            method: "POST",
            data: params,
            header: this.requestHeader(),
            success: function(response) {
                console.info('请求返回结果:' + response.data);
                sucessCallBack(response.data);
            },
            fail: function(data, code) {
                console.info('请求失败 Code:' + code)
                failCallBack(code, that.httpServiceErrorCode(code))
            },
            complete: function() {
                console.info('请求完成')
            }
        });
    },
    
    requestHeader() {
        return {
            "Content-Type": "application/json",
            "Connection": "Keep-Alive",
            "User-Agent": ""
        };
    },
    
    httpServiceErrorCode(code) {
        switch (code) {
            case 404:
                return '服务器地址错误'
                break
            case 500:
                return '服务器挂了'
                break
            default:
                return '服务器异常请稍后重试'
                break
        }
    }
}

index.js 文件 调用请求

startClick() {
    var that = this;
    Http.GET(Api.login, {},
        function successCallBack(data) {
            var obj = JSON.parse(data);
            
            console.info("收到网络请求回调 code:" + obj.errcode + "---message:" + obj.errmsg);
            
            var message = '';
            if (obj.errcode == 0) {
                message = '收到数据'
            } else {
                message = obj.errmsg;
            }
            
            prompt.showToast({
                message: message
            })
        },
        function failCallBack(code, message) {
            console.info('请求服务器失败 Code:' + code)
            
            prompt.showToast({
                message: message
            })
        }
    );
}

有几个问题

  1. 同一个应用工程，同一个module中是否可以 Java JS共同进行UI页面开发。
  2. 同一个应用工程，Java的module和 JS的module怎么互相跳转。
  3. 同一应用工程采用JS开发，不同module js 页面怎么互相跳转。
  4. 以上是否能通过ability 跳转方式实现。

更多关于HarmonyOS鸿蒙Next中JS网络请求封装的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

可以用JS和Java进行UI开发

更多关于HarmonyOS鸿蒙Next中JS网络请求封装的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我想请问一下楼主你请求可以发出去么 我这里根本发不出去 一堆报错

帮你顶你一下…

你这个写的也太复杂吧？？

在HarmonyOS鸿蒙Next中，JS网络请求封装可以通过使用@ohos.net.http模块来实现。该模块提供了HTTP请求的基本功能，包括GET、POST等方法的封装。以下是一个简单的封装示例：

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

class HttpRequest {
    static request(url, method = 'GET', data = null) {
        return new Promise((resolve, reject) => {
            const httpRequest = http.createHttp();
            const options = {
                method: method,
                extraData: data,
                header: {
                    'Content-Type': 'application/json'
                }
            };

            httpRequest.request(url, options, (err, data) => {
                if (err) {
                    reject(err);
                } else {
                    resolve(data);
                }
            });
        });
    }
}

// 使用示例
HttpRequest.request('https://api.example.com/data', 'GET')
    .then(response => {
        console.log('Response:', response);
    })
    .catch(error => {
        console.error('Error:', error);
    });

在这个示例中，HttpRequest类封装了一个通用的网络请求方法request，支持GET和POST等请求方法。通过http.createHttp()创建一个HTTP请求对象，然后使用request方法发送请求，并处理响应或错误。

在HarmonyOS鸿蒙Next中，可以通过@ohos.net.http模块进行网络请求的封装。以下是一个简单的JS网络请求封装示例：

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

class HttpRequest {
  static async get(url, params = {}) {
    const httpRequest = http.createHttp();
    const response = await httpRequest.request(url, {
      method: http.RequestMethod.GET,
      extraData: params
    });
    return response.result;
  }

  static async post(url, data = {}) {
    const httpRequest = http.createHttp();
    const response = await httpRequest.request(url, {
      method: http.RequestMethod.POST,
      extraData: JSON.stringify(data)
    });
    return response.result;
  }
}

export default HttpRequest;

使用时，可以通过HttpRequest.get或HttpRequest.post方法发起请求。

回到顶部