javascript - openweathermap api 无效的 api 密钥错误 [error401]

Question

我在处理 openweathermap api 时遇到问题，该 api 调用在浏览器中运行良好，但是在项目中使用它时，我得到 error401，在这里引用如下：

我没有其中列出的任何问题

还有这里的链接：http ://api.openweathermap.org/data/2.5/weather?zip=10001,us&appid=####

在浏览器中完美运行

这是我的 app.js：

/* Global Variables */
let baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip=';
let apiKey = ',us&appid=####';



// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();

document.getElementById('generate').addEventListener('click', performAction);

function performAction(e){
  const temperature =  document.getElementById('zip').value;
  const userResponse = document.getElementById('feelings').value;
  console.log(baseURL+temperature+apiKey)
  const getTemp = async (baseURL,temperature,apiKey)=>{
      
      const res = await fetch(baseURL+temperature+apiKey)
    try {

    const data=await res.json();
    return data;
    
    }  catch(error) {
    console.log("error", error);
    // appropriately handle the error
     }
  }
   getTemp(baseURL+temperature+apiKey).then( res =>{ console.log(res);
   
    postData('/add', {temperature: temperature, date: newDate, userResponse: userResponse});
    updateUI('/all');})

当我 console.log() 的 url 它工作得很好，但错误出现在 get 请求中：

标签： javascriptopenweathermap

Answer 1

getTemp问题
是给出的第一个参数getTemp是完整的 url（但该函数为 fetch url 组合了 3 个参数）
，因此这些值中​​的 2 个将是未定义的，并且 fetch 最终将作为(baseURL+temperature+apiKey)+undefined+undefined而不是baseURL+temperature+apiKey

解决方案是在调用getTemp时使用逗号，以便它们在函数中填充适当的参数位置

/* Global Variables */
let baseURL = 'http://api.openweathermap.org/data/2.5/weather?zip=';
let apiKey = ',us&appid=####';



// Create a new date instance dynamically with JS
let d = new Date();
let newDate = d.getMonth()+'.'+ d.getDate()+'.'+ d.getFullYear();

document.getElementById('generate').addEventListener('click', performAction);

function performAction(e){
  const temperature =  document.getElementById('zip').value;
  const userResponse = document.getElementById('feelings').value;
  console.log(baseURL+temperature+apiKey)
  const getTemp = async (baseURL,temperature,apiKey)=>{
      
      const res = await fetch(baseURL+temperature+apiKey)
    try {

    const data=await res.json();
    return data;
    
    }  catch(error) {
    console.log("error", error);
    // appropriately handle the error
     }
  }
   getTemp(baseURL,temperature,apiKey).then( res =>{ console.log(res);
   
    postData('/add', {temperature: temperature, date: newDate, userResponse: userResponse});
    updateUI('/all');})