vue jsonp

// 使用 Vue 和 jsonp 的示例代码

// 引入 jsonp 库
import jsonp from 'jsonp';

export default {
  data() {
    return {
      result: null
    };
  },
  methods: {
    fetchJsonpData() {
      // 使用 jsonp 请求外部 API
      jsonp('https://api.example.com/data', {}, (err, data) => {
        if (err) {
          console.error('JSONP 请求失败:', err.message);
          return;
        }
        this.result = data; // 将获取的数据存储在组件的 data 中
        console.log('成功获取数据:', data);
      });
    }
  },
  mounted() {
    this.fetchJsonpData(); // 组件挂载后立即请求数据
  }
};

解释说明：

1. 引入 jsonp 库：我们使用 jsonp 库来发起 JSONP 请求。你可以通过 npm 安装它，例如 npm install jsonp。
2. fetchJsonpData 方法：定义了一个方法 fetchJsonpData 来发起 JSONP 请求。请求的 URL 是一个示例 URL (https://api.example.com/data)，你需要替换为实际的 API 地址。
3. 处理响应：如果请求成功，将返回的数据存储在组件的 data 属性中，并打印到控制台；如果请求失败，则输出错误信息。
4. mounted 钩子：在组件挂载完成后调用 fetchJsonpData 方法，以确保页面加载时立即获取数据。

如果你不需要使用第三方库，也可以通过原生 JavaScript 实现 JSONP 请求，但这里为了简化代码和提高可读性，选择了使用 jsonp 库。