Vue框架內(nèi)置的jsonp插件可以幫助開(kāi)發(fā)者跨域獲取數(shù)據(jù)。jsonp是一種數(shù)據(jù)交互方式，它利用script標(biāo)簽的src屬性可以跨域請(qǐng)求數(shù)據(jù)的特性，將返回的數(shù)據(jù)放入回調(diào)函數(shù)中返回給前端。

在使用Vue中jsonp的時(shí)候，需要基于axios庫(kù)去進(jìn)行請(qǐng)求，這里簡(jiǎn)單介紹一下Vue中jsonp的用法：

import axios from 'axios';
import jsonp from 'jsonp';

1. 安裝jsonp插件

npm install jsonp

2. 在Vue文件中使用jsonp

export default {
mounted () {
this.getJSONPData();
},
methods: {
getJSONPData () {
const url = 'https://jsonpexample.com';
const params = {
id: 1,
name: 'example',
book: 'Vue.js'
};
jsonp(url, params, (err, data) =>{
if (err) {
console.error(err);
} else {
console.log(data);
}
});
}
}
}

3. 參數(shù)介紹

• url：請(qǐng)求地址
• params：請(qǐng)求參數(shù)
• callback：回調(diào)函數(shù)，一般由jsonp自動(dòng)添加

通過(guò)以上簡(jiǎn)單的幾個(gè)步驟，我們就可以輕松的實(shí)現(xiàn)跨域獲取數(shù)據(jù)了。