如何使这个 Javascript API 响应全局的 output ？

Question

我正在尝试接收 output 以获取以下代码，其中 cc 变量会将值记录到空的全局国家变量中。 然后将其打印到控制台，但它不起作用。 我如何在这里使局部变量 cc 全局/给全局变量 country 一个值？

 var country = ''; fetch('https://extreme-ip-lookup.com/json/').then( res => res.json()).then(response => { var cc = (response.countryCode); country = cc; }); console.log(country);

Answer 1

您的问题似乎与代码的异步性质有关。 让我解释。

var country = '';
fetch('https://extreme-ip-lookup.com/json/')
    .then( res => res.json())
    .then(response => {
        var cc = (response.countryCode);
        country = cc;
    });
console.log(country);

获取 function 是异步的。 这就是您需要.then方法的原因。 这意味着当 fetch function 运行时，JavaScript 不会停止程序的 rest，而是在fetch()在后台运行时继续。 因此，当您console.log(country)时，它仍然是原始值（空字符串）。

要回答您的问题，您可以使用Promise记录 cc 的值。

var country = '';
const fetchPromise = fetch('https://extreme-ip-lookup.com/json/')
    .then( res => res.json())
    .then(response => {
        var cc = (response.countryCode);
        country = cc;
    });

Promise.resolve(fetchPromise) // Waits for fetchPromise to get its value
    .then(() => console.log(country))

您可以在MDN 文档中找到有关 Promise 的更多信息

Answer 2

您当前调用console.log(country)在country设置为response.countryCode之前的问题。

您可以通过以下方式将代码放入异步IIFE中来解决此问题：

 (async () => { const response = await fetch('https://extreme-ip-lookup.com/json/'); const ipData = await response.json(); const country = ipData.countryCode; // place all code that uses `country` in here console.log(country); })();

---

如果您有另一个脚本，其中 function 定义取决于county ，请务必接受它作为参数，不要从全局变量中提取数据。

// helper_functions.js

// Bad
function someFunctionThatUsesCountry() {
  console.log(country); // <- don't expect the global to be set
}

// Good
function someFunctionThatUsesCountry(country) {
  console.log(country); // pull country ^ from the parameter list
}

然后，您可以通过传递值来调用 IIFE 中的其他脚本。

(async () => {
  // ...
  someFunctionThatUsesCountry(country);
})();

---

如果出于某种原因想要一个全局变量真的很糟糕。 您应该将 promise 放在此变量中，而不是值中。 使用此 promise 您可以传递该值，并在该值可用时通知其他脚本。

// script_1.js
window.country = fetch('https://extreme-ip-lookup.com/json/')
                 .then(response => response.json())
                 .then(ipData => ipData.countryCode);

// script_2.js (must be loaded after script_1.js)
window.country.then(country => { // <- wait until country is available
  // do stuff with country
  console.log(country);
});

Answer 3

您的问题来自这样一个事实，即您的 fetch 是异步 function，带有 promise。

你想做的是（我想）

var country = '';
//then
fetch('https://extreme-ip-lookup.com/json/')
.then( res => res.json())
.then(response => {
    var cc = (response.countryCode);
    country = cc;
 });
//then
console.log(country);

但是，由于您使用异步 function，因此可以这样做：

//first
var country = '';
//second
fetch('https://extreme-ip-lookup.com/json/')
.then( res => res.json())
.then(response => {
    //fourth
    var cc = (response.countryCode);
    country = cc;
 });
//third
console.log(country);

如何解决？ 看情况。 如果您的console.log 是由按钮触发的，请等待填写国家/地区

否则，将您的代码放在最后，或使用Promise.all() （ 此处的文档）

Answer 4

console.log在fetch解决之前发生。 尝试这个：

let country = '';
fetch('https://extreme-ip-lookup.com/json/')
    .then(res => res.json())
    .then(res => country = res.countryCode)
    .then(() => console.log(country))
  

Answer 5

fetch返回一个Promise ，因此是您问题中的 .then .then()链。

但是如果你踏入Promise Land，你就不会发现了。 你必须用 Promises 做所有事情。

但是您可能会将您的逻辑拆分为可管理的小部分，例如这里

 console.clear() let cached = null; const lookup = () => fetch('https://extreme-ip-lookup.com/json/'); // Caching json and not the fetch promise, because // https://stackoverflow.com/a/54731385/476951 const getJson = () => cached = cached || lookup().then(response => response.json()); const getParameter = (parameter) => getJson().then(json => json[parameter]); const getCountry = () => getParameter('country').then(value => value); const getCountryCode = () => getParameter('countryCode').then(value => value); getCountryCode().then(countryCode => { console.log('countryCode:', countryCode) }) getCountry().then(country => { console.log('country:', country) }) getParameter('city').then(city => { console.log('city:', city) })