如何使用axios获取colormind API？

Question

我尝试使用 Axios 获取 Colormind API。但结果显示网络错误。我该如何解决这个问题？

const url = "http://colormind.io/api/";
const data = {
    model: "default"
  }

const reloadBtn = document.querySelector('.reload-btn')


async function getColors(){
  axios.post(url,data)
  .then(response => {
    const palette = response.data.result;
     console.log(response)
  })
  .catch(error => {
    console.error(error);
  });
  
}


reloadBtn.addEventListener('click',async (e) => {
  await getColors();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js" integrity="sha512-uMtXmF28A2Ab/JJO2t/vYhlaa/3ahUOgj1Zf27M5rOo8/+fcTUVH0/E0ll68njmjrLqOBjXM3V9NiPFL5ywWPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<button class="reload-btn">click</button>

Answer 1

要使用 Axios 获取 Colormind API，您需要确保正确发出 API 请求并处理任何潜在错误。以下是如何修改代码以成功获取 API 的示例：

const axios = require('axios');

const url = "http://colormind.io/api/";
const data = {
  model: "default"
};

const reloadBtn = document.querySelector('.reload-btn');

async function getColors() {
  try {
    const response = await axios.post(url, data);
    const palette = response.data.result;
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

reloadBtn.addEventListener('click', async (e) => {
  await getColors();
});

修改后的代码中：

首先，确保您已通过运行 npm install axios 或使用其他方法将其包含在项目中来安装 Axios。

使用 const axios = require('axios'); 导入 Axios 库；或者如果您使用 ES 模块，则使用 import 语句。

在 getColors() 函数中使用 async/await 方法向 Axios 发出异步 API 请求。这样，您可以直接使用await关键字来等待响应，而不是使用.then()和.catch()链接promise。

将 API 请求包装在 try/catch 块中以处理任何潜在的错误。如果发生错误，它将被捕获在 catch 块中，并且您可以将错误记录到控制台。

确保您有稳定的互联网连接，并且可以从您的网络访问 Colormind API。如果仍然遇到网络错误，请务必检查您的网络设置和防火墙配置，以确保 API 请求未被阻止。

请记住在应用程序中将点击行替换为适当的 HTML。

通过这些修改，您应该能够使用 Axios 成功获取 Colormind API。