Vue中使用jsonp进行跨域请求

Posted 2020-09-30

Vue-resouse中可以通过this.$http.jsonp的方式直接使用jsonp进行跨域请求。官方在推荐使用axios之后，axios并没有集成jsonp。但在axios的github中（https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp），可以直接安装jsonp并使用他来坐跨域请求。

<script>

var jsonp = require(‘jsonp‘);
export default {
data() {
return {
author: "微信公众号 jinkey-love",
articles: []
}
},
mounted: function() {
let that = this
jsonp(‘https://api.douban.com/v2/movie/top250?count=20‘, null, function (err, data) {
if (err) {
console.error(err.message);
} else {
that.articles=data.subjects
}
});
}
}

</script>

在vue组件中，可以这样使用，我使用的是豆瓣的一个api接口，但是需要注意的是，jsonp中的函数作用域有变化，因此，需要 在请求之前，let that = this 保存当前的this