将外部变量传递给 Axios.get().then() 调用

Question

我想使用 Axios 调用端点，然后对响应数据和调用前定义的变量进行处理。我知道如何pass data into the callback when creating the function returning the promise myself, but since Axios is external code and I can't seem to find any option to pass extra data in the Axios docs or the config。除了将值作为数据发送到服务器并让服务器在响应中对其进行响应或使用 window 全局变量使用丑陋的解决方法之外，还有其他方法可以使这项工作吗？

const animate = true; // The variable to be passed
axios.get('/endpoint.json')
    .then(function(response, animate) { // This doesn't work...
        if (response.data.coordinates) {
            console.log(animate); // ...because this is undefined
            setLocation('takeoff_location', response.data.coordinates, animate); // variable and response data need to be passed to this call
        }
    });

Answer 1

.then() 是一个 promise，可以访问作用域外的任何变量（比如闭包）。如果你想封装 API 调用，那么将整个东西包装在一个函数中，然后将参数放在那里。

const doRequest = function(animate) {
  axios.get('/endpoint.json').then(function(response) {
    if (response.data.coordinates) {
      setLocation('takeoff_location', response.data.coordinates, animate);
    }
  });
};

doRequest(250);
doRequest(500);

请注意，这将连续快速执行 2 个动画请求。如果你想“等待”另一个先完成，你可以这样做：（注意我现在从函数返回 axios 请求）。这意味着返回了 promise 对象，现在您可以在函数的“外部”链接更多 .then() 函数，这只会在请求完成时发生。

const doRequest = function(animate) {
  return axios.get('/endpoint.json').then(function(response) {
    if (response.data.coordinates) {
      setLocation('takeoff_location', response.data.coordinates, animate);
    }
  });
};

doRequest(250).then(function() {
  // this will happen when the outer API call finishes
  doRequest(500);
});

Answer 2

这将创建一个 new animate 变量，与已定义的变量完全无关：

function(response, animate)

这个新变量“遮蔽”了更高范围内的变量，因此在这个函数中任何对 animate 的引用都只引用这个新变量。未定义是因为 Axios（特别是 .get() 返回的 Promise）没有理由将第二个值传递给此回调。

不要隐藏变量：

function(response)

然后在函数内任何对 animate 的引用都将引用更高范围内的变量。

将外部变量传递给 Axios.get().then() 调用

Passing external variables into Axios.get().then() call

javascript

scope

promise

axios