从客户端函数内访问全局变量

Question

我想知道是否可以从客户端函数内访问变量，或者我是否应该始终将所需的参数传递到其中？

我正在使用TestCafe的客户端功能来提出HTTP请求(创建新用户(。我们有多个环境，所以我不想将URL进行编码。

如果我将所需的URL传递给该函数，则请求完成...但是我在尝试访问createUserUrl变量时收到了错误。

import createUserUrl from '../config.js'.createUserUrl;
const createUserRequest = ClientFunction(userDetails => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', createUserUrl, true);
    xhr.onload = function() {
      resolve(xhr.responseText);
    };
    // Set headers:
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(userDetails));
  });
});

导致ReferenceError: reqUrl is not defined。

否则，此选项可行

const createUserRequest = ClientFunction(reqUrl, userDetails => {
  return new Promise(resolve => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', reqUrl, true);
    xhr.onload = function() {
      resolve(xhr.responseText);
    };
    // Set headers:
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(userDetails));
  });
});

第二个选项是首选的路由，还是有没有一种方法可以从客户端功能中访问变量？

Answer 1

客户端功能具有一定的限制，无法访问外部范围中定义的变量。我还建议您考虑将必要的变量通过客户端函数的options.dependencies对象：

import { Selector, ClientFunction } from 'testcafe';
const articleHeader = Selector('#article-header');
const getArticleHeaderHTML = ClientFunction(() => articleHeader().innerHTML, {
     dependencies: { articleHeader }
});