vue中jsonp插件的使用方法示例

下面是“vue中jsonp插件的使用方法示例”的完整攻略。

1. 什么是JSONP

JSONP，全称为“JSON with Padding”，是一种用于解决跨域请求的技术。在同源策略的限制下，通过script标签的src属性发送请求，服务器返回一段被包裹在回调函数中的JSON数据，然后前端将其解析并使用。

2. JSONP插件在Vue中的使用方法

在Vue中使用JSONP，可以使用jsonp插件。同时，我们需要引入一个服务器端文件，来处理JSONP请求并返回JSON数据。

2.1 引入jsonp包

我们需要先安装jsonp包：

npm install jsonp --save

2.2 编写服务器端文件

我们需要写一个服务器端文件，比如返回一段JSON数据：

const express = require('express')
const app = express()

app.get('/api/data', (req, res) => {
  const data = { name: '张三', age: 18 }
  // 获取jsonp回调函数名，callback参数即为回调函数名
  const callback = req.query.callback
  // 包裹在回调函数中返回
  const jsonpData = `${callback}(${JSON.stringify(data)})`
  res.send(jsonpData)
})

app.listen(3000, () => {
  console.log('server is running')
})

2.3 在Vue中使用JSONP

在Vue中使用JSONP，首先需要在vue.config.js中配置proxy：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

然后，在Vue组件中，我们可以通过jsonp插件来发送JSONP请求：

<template>
  <div>
    <h1>{{ data.name }} - {{ data.age }}</h1>
  </div>
</template>

<script>
import jsonp from 'jsonp'

export default {
  data() {
    return {
      data: {}
    }
  },
  mounted() {
    jsonp('/api/data', (err, res) => {
      if(err) {
        console.log(err)
      } else {
        this.data = res
      }
    })
  }
}
</script>

2.4 示例1：获取豆瓣电影数据

以下是一个示例，请求豆瓣电影API，获取电影列表，我们将获取到的数据展示在页面中。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.title }} - {{ item.rating.average }}
      </li>
    </ul>
  </div>
</template>

<script>
import jsonp from 'jsonp'

export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    jsonp(
      'https://api.douban.com/v2/movie/top250',
      {},
      (err, res) => {
        if (err) {
          console.log(err)
        } else {
          this.list = res.subjects
        }
      }
    )
  }
}
</script>

2.5 示例2：动态调整回调函数名

有些接口要求回调函数名的名称必须是固定的，但是有些接口每次请求的回调函数名必须是不同的，这时候我们可以动态生成回调函数名。

<template>
  <div>
    <h1>{{ data.name }} - {{ data.age }}</h1>
    <button @click="getData">获取数据</button>
  </div>
</template>

<script>
import jsonp from 'jsonp'

export default {
  data() {
    return {
      data: {}
    }
  },
  methods: {
    getData() {
      const callback = `jsonp_${Date.now()}`
      jsonp(`/api/data?callback=${callback}`, (err, res) => {
        if(err) {
          console.log(err)
        } else {
          this.data = res
        }
      })
    }
  }
}
</script>

上面代码中，我们动态生成了一个回调函数名jsonp_${Date.now()}。这样每次请求的回调函数名就不同了。需要注意的是，在服务器端，我们需要根据query参数传递的回调函数名来包裹JSON数据。

到此为止，我们已经介绍了JSONP在Vue中的使用方法，以及提供了两个使用示例，相信可以帮助读者更好地理解JSONP的原理和使用方法。