Vue中Jsonp的用法主要用于跨域請(qǐng)求其他服務(wù)器的資源。解析遠(yuǎn)程數(shù)據(jù)時(shí)，我們往往需要用到Jsonp技術(shù)，Vue中借鑒了這項(xiàng)技術(shù)，為我們帶來了方便的處理方式。

使用Vue-jsonp，我們需要先安裝它。

npm install vue-jsonp --save

接著，我們就可以在Vue組件中使用Jsonp。

import Jsonp from 'vue-jsonp'
Vue.use(Jsonp)
Vue.jsonp(url, [data], [jsonpOptions])
	.then(response =>{
//處理返回的數(shù)據(jù)
	})
	.catch(error =>{
//處理error
	})

可以看到，我們需要傳遞3個(gè)參數(shù)：

• url：表示Jsonp請(qǐng)求的url地址，必填項(xiàng)。
• data：表示請(qǐng)求中需要傳遞的數(shù)據(jù)，非必填項(xiàng)。
• jsonpOptions：表示Jsonp請(qǐng)求的選項(xiàng)，非必填項(xiàng)。

Jsonp請(qǐng)求在進(jìn)行時(shí)，會(huì)在頁(yè)面中創(chuàng)建一個(gè)script標(biāo)簽，從而發(fā)起一個(gè)GET請(qǐng)求，而服務(wù)器需要返回一個(gè)類似于以下的JSON數(shù)據(jù)：

jsonpCallback({"name": "vue-jsonp"})

在我們使用Vue-jsonp進(jìn)行Jsonp請(qǐng)求時(shí)，需要注意的是，Jsonp請(qǐng)求不支持POST方式，另外，我們需要指定jsonpCallback的名字，如：

Vue.jsonp('http://api.example.com/', {
	'jsonpCallback': 'callback'
})

以上就是關(guān)于Vue中Jsonp的用法介紹，希望對(duì)開發(fā)者們有所幫助。