Velo：Fetch API でサードパーティサービスにアクセスする

1import { getJSON } from 'wix-fetch';
2
3// GET call using getJSON
4export async function getGreetings() {
5  const response = await getJSON('https://velo-examples.wixsite.com/training-tester/_functions/greetings');
6  return response;
7}

1import { getGreetings } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6  $w('#fetchAllButton').onClick(async () => {
7    $w('#fetchAllButton').disable();
8
9    const fetchedData = await getGreetings();
10    const repeaterData = fetchedData.map(item => {
11      item._id = item.id.toString();
12      return item;
13    });
14
15    $w('#helloRepeater').data = repeaterData;
16    $w('#helloRepeater').show();
17        
18    $w('#fetchAllButton').enable();
19  });
20
21  $w('#helloRepeater').onItemReady( ($item, itemData) => {
22    $item('#repeatedLanguageText').text = itemData.language;
23    $item('#repeatedHelloText').text = itemData.greeting;
24  });
25});

1import { fetch } from 'wix-fetch';
2
3// GET call using fetch
4export async function getRandomGreeting() {
5  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/randomgreeting');
6  if(response.ok) {
7    const json = await response.json();
8    return json.greeting;
9  } else {
10    return Promise.reject("Fetch did not succeed");
11  }
12}

1import { getRandomGreeting } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6  $w('#fetchRandomButton').onClick(async () => {
7    $w('#fetchRandomButton').disable();
8
9    const fetchedData = await getRandomGreeting();
10
11    $w('#languageText').text = fetchedData.language;
12    $w('#helloText').text = fetchedData.message;
13
14    $w('#languageText').show();
15    $w('#helloText').show();
16
17    $w('#fetchRandomButton').enable();
18  });
19});

1import { fetch } from 'wix-fetch';
2
3// POST call using fetch
4export async function postGreeting(language, greeting) {
5  const jsonBody = {
6    language,
7    greeting
8  };
9    
10  const fetchOptions = {
11    method: 'post',
12    headers: 'application/json',
13    body: JSON.stringify(jsonBody)
14  };
15
16  const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions); 
17  return response.json();
18}

1import { postGreeting} from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6    $w('#postButton').onClick(async () => {
7        $w('#postButton').disable();
8
9        const putResponse = await postGreeting($w('#languageInput').value, $w('#greetingInput').value);
10
11        console.log(putResponse);
12
13        if(putResponse.success) {
14            $w('#successIcon').show();
15            $w('#errorIcon').hide();
16            $w('#responseMessage').text = putResponse.success;
17        }
18        else {
19            $w('#successIcon').hide();
20            $w('#errorIcon').show();
21            $w('#responseMessage').text = putResponse.error;
22        }
23
24        $w('#responseMessage').show();
25        $w('#postButton').enable();
26    });
27});

1//serviceModule.jsw
2
3import {fetch} from 'wix-fetch'; 
4import {getSecret} from 'wix-secrets-backend';
5
6export async function getCurrentTemp(city) {
7  const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
8  const key = await getSecret(WeatherApiKey);
9    
10  let fullUrl = url + city + '&APPID=' + key + '&units=imperial'; 
11  
12  return fetch(fullUrl, {method: 'get'})
13    .then(response => response.json())
14    .then(json => json.main.temp);
15}