vue里面axios使用jsonp

如何在 Vue 中使用 axios 发送 JSONP 请求

1. 理解 JSONP

在前端开发中，通常使用 JSONP（JSON with Padding）来进行跨域请求。JSONP 是一种通过动态创建 <script> 标签来实现跨域通信的方法。

2. JSONP 请求流程

为了帮助你更好地理解如何在 Vue 中使用 axios 发送 JSONP 请求，以下是整个流程的步骤：

erDiagram
    JSONP请求流程 {
        "客户端" -- 发送JSONP请求 --> "服务端"
        "服务端" -- 返回JSON数据 --> "客户端"
    }

3. 使用 axios 发送 JSONP 请求

接下来，让我们一步步来实现在 Vue 中使用 axios 发送 JSONP 请求。

步骤一：安装 axios

首先，在项目中安装 axios：

npm install axios

步骤二：创建 JSONP 请求

在 Vue 组件中，使用 axios 发送 JSONP 请求的代码如下：

```javascript
// 引入 axios
import axios from 'axios';

// 发送 JSONP 请求
axios.jsonp = (url) => {
  return new Promise((resolve, reject) => {
    const callbackName = 'jsonp_callback_' + Math.random().toString(36).substr(2);
    window[callbackName] = resolve;

    const script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    script.async = true;
    document.head.appendChild(script);
  });
};

// 使用 JSONP 请求
axios.jsonp('
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

### 代码解释

- `axios.jsonp` 方法用于发送 JSONP 请求，其中通过动态创建 \<script> 标签来实现跨域通信。
- `callbackName` 用于生成一个唯一的回调函数名，以确保每个请求都有一个独立的回调函数。
- `window[callbackName]` 用于在全局作用域中定义回调函数，以便服务端返回数据后执行。
- `script.src` 设置要请求的 URL，并将回调函数名作为参数传递。
- `script.async = true` 表示异步加载脚本。
- `document.head.appendChild(script)` 将 \<script> 标签添加到文档头部以发起请求。

## 结论

通过以上步骤，你已经学会如何在 Vue 中使用 axios 发送 JSONP 请求了。希望这篇文章对你有所帮助，如果有任何疑问或困惑，欢迎随时向我提问。祝你在前端开发的道路上越走越远！