WIX Fetch API 返回空 JSON (VELO)答案

【问题标题】：WIX Fetch API returns empty JSON (VELO)WIX Fetch API 返回空 JSON (VELO)
【发布时间】：2021-05-14 15:00:40
【问题描述】：

概述

我正在使用 AgileCRM。当用户填写表格时，我想在此 CRM 中创建新联系人。我在 PostMan 中成功地做到了这一点。我正在尝试从 WIX 发出一个简单的“GET”请求，这样我就可以在进入我的 POST 请求（创建联系人）之前理解 VELO 代码。

问题

当我发出GET 请求时，我得到200 的状态，我得到一个空的JSON 作为响应，并且在我的请求标头中说我的方法是POST 这是不是我定义的方法。

问题

我在这里做错了什么导致空响应和不正确的方法？

设置

我的前端导入了一个处理基本身份验证和获取的后端函数。我是这样做的，因为当我从前端这样做时遇到了 CORS 问题。

//agileapi.jsw
import {fetch} from 'wix-fetch';
import base64 from "nodejs-base64-encode";
import {getSecret} from 'wix-secrets-backend';

export async function getAPIKey() {
  return await getSecret("AGILERESTAPI");
}

export async function getUsername() {
  return await getSecret("AGILEUSERNAME");
}

let password = getAPIKey()
let username = getUsername()

let options = {
    "method": "GET",
    headers: {
        "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
        "Content-Type": "application/json",
    }
}
let url = "https://photodynamic.agilecrm.com/dev/api/contacts";
export async function getContacts() {
   await fetch(url, options)
    .then( (response) => {
        if(response.ok) {
            return response.json()
        }
        else {
            return Promise.reject('Fetch did not succeed');
        }}
    )
    .then((json) => console.log(json))
    .catch((err) => console.log(err));
}

//wix debug page code
import {getContacts} from 'backend/agileapi'

$w.onReady(function (){
   $w("#getContacts").onClick( (event) => {
        getContacts()
    })
});

【问题讨论】：

标签： javascript fetch velo agile-crm

【解决方案1】：

您必须等到承诺兑现。您代码中的 password 和 username 不是字符串，而是 Promise。

//agileapi.jsw
import { fetch } from 'wix-fetch';
import base64 from "nodejs-base64-encode";
import { getSecret } from 'wix-secrets-backend';

const url = "https://photodynamic.agilecrm.com/dev/api/contacts";

export async function getContacts() {
  // Wait for until all promises to be fulfilled
  const [password, username] = await Promise.all([
    getSecret("AGILERESTAPI"),
    getSecret("AGILEUSERNAME")
  ])

  const options = {
    method: "GET",
    headers: {
      // Now the password and username are the strings
      "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
      "Content-Type": "application/json",
    }
  }

  // Returns the API result to client (browser)
  return fetch(url, options)
    .then((response) => {
      if (response.ok) {
        return response.json();
      }
      return Promise.reject('Fetch did not succeed');
    });
}

页面代码

import { getContacts } from 'backend/agileapi'

$w.onReady(function () {
  $w("#getContacts").onClick((event) => {
    getContacts()
      .then((json) => {
        // Your json
        console.log(json);
      })
      .catch((error) => {
        // Reason of error
        console.log(error)
      });
  })
});

【讨论】：

【解决方案2】：

我能够解决这个问题。其余 api 默认返回 xml。通过将以下内容添加到我的标题中，我可以将其格式化为 JSON。

let options = {
"method": "GET",
    headers: {
        "Authorization": 'Basic ' + base64.encode(username + ":" + password, 'base64'),
        "Content-Type": "application/json",
        // added this to resolve the issue
        "Accept": "application/json"
    }

}

此解决方案特定于 AgileCRM，可能与您使用的 API 不同。希望我上面的代码能让其他人尝试使用 WIX Velo 进行 API 调用。

【讨论】：