在 Vue 中轻松实现 JSONP 请求：掌握 3 个简单步骤

2023-09-03 16:01:18

前言

在现代网络开发中，跨域请求是一个常见挑战。在 Vue 中，我们可以借助 JSONP（JSONP）轻松解决这一问题。JSONP是一种简单的技术，允许您从另一个域获取数据，而无需担心跨域资源共享（CORS）限制。

3 个步骤实现 JSONP 请求

1. 安装 Vue JSONP 插件

在您的 Vue 项目中，安装 vue-jsonp 插件：

npm install vue-jsonp --save

在 main.js 中，注册插件：

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

2. 发送 JSONP 请求

现在，您可以在组件中使用 this.$jsonp 方法发送 JSONP 请求：

<script>
export default {
  methods: {
    getJsonp() {
      this.$jsonp('https://example.com/api/data')
        .then(response => {
          console.log(response.data)
        })
    }
  }
}
</script>

3. 处理响应

$jsonp 方法返回一个 Promise，解析后包含响应数据：

// example.com/api/data?callback=__vue_jsonp_cb_1
__vue_jsonp_cb_1({ data: '...' })

真实案例

以下是一个真实案例，演示如何在 Vue 中使用 JSONP 请求从 Twitter 获取推文：

<script>
import Vue from 'vue'

export default {
  data() {
    return {
      tweets: []
    }
  },
  methods: {
    getTweets() {
      const url = `https://api.twitter.com/1.1/search/tweets.json?q=vuejs&count=5`
      this.$jsonp(url)
        .then(response => {
          this.tweets = response.data.statuses
        })
    }
  },
  mounted() {
    this.getTweets()
  }
}
</script>