How to use Fetch API in App Service

[tererun]

I want to use Fetch API in App Service and I tried to call this.request() function but I got the TypeError: not a function error.
Could you tell me how to use Fetch API in App Service?

app-service

import { log } from "@zos/utils";

const logger = log.getLogger("some.appservice.logger");

AppService({
  onInit(e) {
    logger.log("on");
    this.fetchRequest();
  },
  fetchRequest() {
    this.request({
      method: "FETCH_REQUEST",
    })
      .then((data) => { logger.log("sent"); })
      .catch((res) => {});
  },
});

app-side

import { BaseSideService } from "@zeppos/zml/base-side";

async function internalFetchRequest(res) {
  try {
    const response = await fetch({
      url: "http://example.com",
      method: "GET"
    });
    res(null, {
      result: response.body,
    });
  } catch (error) {
    res(null, {
      result: "ERROR",
    });
  }
};

AppSideService(
  BaseSideService({
    onInit() {},
    onRequest(req, res) {
      console.log("=====>,", req.method);
      switch (req.method) {
        case "FETCH_REQUEST":
          internalFetchRequest(res);
      }
    },
    onRun() {},
    onDestroy() {},
  })
);

[maxiges]

App service also must be created/wrapped by zml library

https://zepp-health.github.io/zml/getting-started

[tererun]

Thank you!

[silver-zepp]

You have to modify your code a bit to look like this @tererun:

import { BasePage } from "@zeppos/zml/base-page";

AppService(
    BasePage({
        ...,
        fetchRequest() {
            this.httpRequest({
                    method: 'POST',
                    url: "...",
                    body: {...},
                })
                .then((result) => {
                    ...
                }
        }
}

[tererun]

Thank you for your replying, I will try it

[miguelavh]

Hi @tererun, does It work for you? I tested but didn't work for me... Thank you

[derekwilson]

I've also tried - see my code below - but I cannot get it to work - as soon as I add and configure a service in the app all ZML comms seems to not work.

[derekwilson]

Hey @silver-zepp - thanks for the help in trying to get this to work. I've been trying and I think I am just not understanding the layout of the framework. I think that the "app-service" and the "pages" code runs on the watch and the "app-side" runs on the phone in the Zepp app right?

So I have an app where the page on the watch talks to the app-side code like this

import { BasePage } from "@zeppos/zml/base-page";

Page(
  BasePage({
    onInit(param) {
      this.getMyData(this.state.id);
    },
    getMyData(myid) {
      this.request({
        id: myid,
      })
      .then((data) => {
        logger.log("receive data");
        const { result = {} } = data;
        this.updateDisplay(result)
      })
      .catch((res) => {
        if (!isEmptyObject(res)) {
          const errorText = JSON.stringify(res);
          logger.log(`error = ${errorText}`);
        }
      });
    },

And on the app side it looks like this

import { BaseSideService } from "@zeppos/zml/base-side";

AppSideService(
  BaseSideService({
    onInit() {
      console.log(`onInit: started`);
    },

    onRequest(req, res) {
      console.log(`onRequest: =====>, ${req.id}`);
      fetchDataFromTheInternet(res, req.id);
    }
  })
);

Where fetchDataFromTheInternet() uses a fetch to get data from a domain

const res = await fetch({
        url: selectionUrl,
        method: 'GET'
      })

All is good in the simulator and on the device and it works perfectly

Following your instructions I created and added a app-service like so

import { parseQuery,  isEmptyObject} from "../libs/utils";
import { BasePage } from "@zeppos/zml/base-page";

AppService(
  BasePage({
    onInit(e) {
      let result = parseQuery(e);
      this.getMyData(result.id);
    },
    getMyData(myid) {
      this.request({
        id: myid,
      })
      .then((data) => {
        logger.log("receive data");
        const { result = {} } = data;
        this.updateDisplay(result)
      })
      .catch((res) => {
        if (!isEmptyObject(res)) {
          const errorText = JSON.stringify(res);
          logger.log(`error = ${errorText}`);
        }
      });
    },

and added to the JSON

  "targets": {
    "common": {
      "module": {
        "page": {
          "pages": [
            "page/index"
          ]
        },
        "app-side": {
          "path": "app-side/index"
        },
        "app-service": {
          "services": ["app-service/time_service"]
        }
      },

Now the app still works fine in the simulator and does exactly what I want however it does not work on my real device - a BIP 5 Unity. I cannot get any data back from the AppSideService. Even if I dont do anything with the app-service as long as it is configured in the JSON I cannot get to the AppSideService.

Is it possible to have an app-side and an app-service configured in the same app? Any help would be great, or even just an example that has pages, app-side and ap-service all working together,

Thanks

[silver-zepp]

Hey Derek. Yeah, you should be able to use both. Peek at these samples: one, two.

Also, join us on Discord for quicker support: https://tinyurl.com/zepp-health-discord
@derekwilson

[derekwilson]

@silver-zepp Thanks for the reply and for the links, I've joined the group.

OK - I got the SleepAgent example from link2 above. I did make some small mods

1. I changed the HTTP request to be a GET from the example URL in FetchAPI (I didnt want to setup a server and my use case only needs a GET)
2. I changed the UI to stop the service - I didnt want to leave the service running on the watch (this means I need to keep the watch app active by tapping the watch screen until the timer in the service goes off)
3. Added some logging

Its interesting as I get the same problem - in the simulator I see this (which is pretty much what we expect)

�8/27 [0]21:55:32.353 I/quickjs-libc SBEngine: Timer service INIT 
�
�8/27 [0]21:55:32.365 I/quickjs-libc SBEngine: === startService result: {"file":"app-service/background_service","result":true} === 
�
�8/27 [0]21:56:00.113 I/quickjs-libc SBEngine: Timer service v6 TICK 
�[0
�8/27 [0]21:56:00.153 I/quickjs-libc SBEngine: ***sending request 
�
�8/27 [0]21:56:00.594 I/quickjs-libc SBEngine: total length 1022

��8/27 [0]21
:56:00.594 I/quickjs-libc SBEngine: ***Request status: {"status":200,"statusText":"OK","headers":{"date":"Tue, 27 Aug 2024 21:56:00 GMT","content-type":"application/json; charset=utf-8","content-length":"83","connection":"close","repor
�

But on the real device - a BIP5 Unity - I see ***sending request but then nothing, the logging just stops (in fact the next logging is the TICK line for the next callback) so all I see is TICK/***sending request lines repeated with no response

I've attached my source here. I wonder if its an issue specific to the BIP5 Unity ?

Anduin.SleepAgent.ClockApp.zip