Question

我想知道是否可以从ClientFunction中访问变量，或者是否应该始终将必需的参数传递给它？

我正在使用TestCafe的ClientFunction发出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));
  });
});

第二个选项是首选路线，还是可以从ClientFunction内部访问变量？

Answer 1

客户函数具有certain limitations，并且不能访问在外部范围中定义的变量。我还建议您考虑通过客户端函数的options.dependencies对象传递必要的变量：

import { Selector, ClientFunction } from 'testcafe';

const articleHeader = Selector('#article-header');

const getArticleHeaderHTML = ClientFunction(() => articleHeader().innerHTML, {
     dependencies: { articleHeader }
});

从ClientFunction内部访问全局变量

1 个答案: