使用 Axios 发送跨域请求的时候，通常会使用 JSONP（JSON with Padding）技术。JSONP 是一种跨域请求的方法，它利用了 HTML <script> 元素的跨域特性来实现数据的获取。在本文中，我们将介绍如何使用 Axios 发送 JSONP 请求，并解决一个实际的问题。

什么是 JSONP

JSONP 是一种利用 <script> 标签进行跨域请求的技术。它通过动态创建 <script> 标签，并将请求的 URL 作为标签的 src 属性值，然后在服务端返回的响应结果外包裹一个函数调用，以实现数据的获取。

JSONP 的原理是由于浏览器对于 <script> 标签的跨域限制较宽松，可以跨域加载其他域下的资源文件。通过将返回的数据包裹在一个函数调用中，浏览器就可以将返回的数据当作 JavaScript 代码执行，从而获取到数据。

使用 Axios 发送 JSONP 请求

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 环境。它提供了丰富的 API，使得发送 HTTP 请求变得更加简洁和灵活。

在使用 Axios 发送 JSONP 请求之前，我们需要先安装 Axios。可以通过 npm 或 yarn 进行安装：

npm install axios

安装完成后，我们可以在项目中引入 Axios：

import axios from 'axios';

接下来，我们使用 Axios 发送 JSONP 请求的代码如下所示：

axios.jsonp = (url) => {
  return new Promise((resolve, reject) => {
    const callbackName = `jsonp_callback_${Date.now()}`;
    const script = document.createElement('script');
    script.src = `${url}${url.includes('?') ? '&' : '?'}callback=${callbackName}`;
    document.body.appendChild(script);

    window[callbackName] = (data) => {
      delete window[callbackName];
      document.body.removeChild(script);
      resolve(data);
    };

    script.addEventListener('error', () => {
      delete window[callbackName];
      document.body.removeChild(script);
      reject(new Error('JSONP request failed'));
    });
  });
};

代码中，我们定义了一个 axios.jsonp 方法，它接受一个 URL 参数，并返回一个 Promise 对象。在方法内部，我们通过动态创建一个 <script> 标签，并将请求的 URL 作为标签的 src 属性值。同时，我们在 URL 中添加一个 callback 参数，该参数的值为一个随机生成的回调函数名。

我们将回调函数名保存在一个变量中，以便在返回的数据到达后，能够正确地执行回调函数。在回调函数中，我们删除了全局的回调函数变量，并移除了动态创建的 <script> 标签。最后，我们通过调用 resolve 将返回的数据传递给 Promise 对象的 then 方法，或调用 reject 抛出错误。

现在，我们可以使用 axios.jsonp 方法发送 JSONP 请求，并处理返回的数据。下面是一个示例：

axios.jsonp('
  .then((data) => {
    console.log('JSONP response:', data);
  })
  .catch((error) => {
    console.error('JSONP request failed:', error);
  });

在示例中，我们使用 axios.jsonp 方法发送了一个请求到 ` 地址，并在成功时打印返回的数据，失败时打印错误信息。

解决实际问题：获取天气信息

假设我们有一个需求，需要在页面上显示当前城市的天气信息。我们可以通过调用一个提供天气数据的 API 来获取天气信息。由于天气 API 的跨域限制，我们可以使用 Axios 发送 JSONP 请求来解决这个问题。

首先，我们需要选择一个提供天气数据的 API。在本文中，我们选择使用 OpenWeatherMap 提供的天气 API（

我们可以通过以下代码获取当前城市的天气信息：

axios.jsonp('