如何在JavaScript函数内部获取外部变量的值？

嘿，我来帮你搞定这个问题！你现在的核心困扰其实是异步操作的执行顺序——fetch是异步请求，它的回调函数会在网络请求完成后才触发，而你当前的代码里不仅没正确把response传递给filter，还因为异步特性导致变量c没法及时拿到有效值。下面给你两种实用的解决方案：

方案一：在fetch的成功回调中直接传递response #

既然fetch的then回调是请求成功后才会执行的，那我们直接在这里把拿到的response传给filter函数就行，这样filter内部和Test函数里的c都能获取到这个值：

<script>
Test();
function Test(){
  var c = "";
  function filter(data) {
    c = data;
    console.log("filter内的response数据:", data);
    console.log("Test函数内的c变量:", c); // 现在能正确拿到值了
  }
  var url = 'https://www.json-generator.com/api/json/get/coyqwdNpWq?indent=2';
  fetch(url, { method: 'GET', })
    .then(function(response){
      return response.json(); // 解析JSON格式的响应
    })
    .catch(function(error){
      console.error('请求出错:', error);
    })
    .then(function(response){
      // 请求成功后，把response传给filter
      filter(response);
      // 你也可以在这里直接处理response，比如打印指定字段
      console.log('请求成功，第一个数据的名称:', response[0].name);
    })
}
</script>

方案二：用async/await简化异步代码（更推荐） #

ES2017引入的async/await能让异步代码的写法更像同步代码，避免嵌套回调的混乱。我们只需要把Test改成async函数，然后用await等待fetch的结果：

<script>
// async函数返回Promise，调用时可以用catch捕获全局错误
Test().catch(err => console.error('全局错误:', err));
async function Test(){
  var c = "";
  function filter(data) {
    c = data;
    console.log("filter内的response数据:", data);
    console.log("Test函数内的c变量:", c);
  }
  var url = 'https://www.json-generator.com/api/json/get/coyqwdNpWq?indent=2';
  try {
    // 等待fetch请求完成
    const response = await fetch(url, { method: 'GET' });
    // 等待响应解析为JSON
    const data = await response.json();
    // 拿到数据后调用filter
    filter(data);
    console.log('请求成功，第一个数据的名称:', data[0].name);
  } catch(error) {
    console.error('请求出错:', error);
  }
}
</script>

额外说明 #

你之前的代码里filter函数定义了data参数，但从来没有调用过它，而且因为fetch的异步特性，就算你在Test函数末尾打印c，也会得到空字符串——因为这时候请求还没完成，then回调还没执行，c还没被赋值。所以核心就是必须在异步操作完成后，再去处理拿到的response数据。

内容的提问来源于stack exchange，提问作者peterDalis. st