這次帶給大家VUE2.0中Jsonp使用步奏詳解,VUE2.0中Jsonp使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
1.JSONP的用途和原理
#使用JSONP主要是目的透過動態建立Script,動態拼接url,進而抓取數據,實現跨域。確切地說,AJAX請求由於同源影響,是不允許進行跨域請求的,而Script標籤src屬性中的連結卻可以存取跨域的js腳本,利用這一特性,服務端不再返回JSON格式的數據,而是傳回一段調用某個函數的JS程式碼,在src屬性中進行調用,實現跨域。
2.JSONP的使用方法
#2.1 引入github的jsonp
##開啟專案> ;package.json>在”dependencies”下加上程式碼"jsonp": "^0.2.1"
npm install npm run dev
#2.2 封裝jsonp.js
import originJSONP from 'jsonp' export default function jsonp(url, data, option) { url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => { originJSONP(url, option, (err, data) => { if (!err) { resolve(data) } else { reject(err) } }) }) } function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += `&${k}=${encodeURIComponent(value)}` } // 删除第一个& return url ? url.substring(1) : '' }
#目錄結構如下:
2.3 jsonp.js的API呼叫
在src的資料夾下建立api資料夾,用於儲存api呼叫的js,新config.js和recommend.js兩個檔案。config.js export const commonParams = { g_tK: 5381, inCharset: 'utf-8', outCharset: 'utf-8', notice: 0, format: 'jsonp' } export const options = { param: 'jsonpCallback' } export const ERR_OK = 0 recommend.js import jsonp from 'common/js/jsonp' import {commonParams, options} from './config' export function getRecommend() { const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' //此处的url可以自行修改,本文是qq音乐链接 const data = Object.assign({}, commonParams, { platform: 'h5', uin: 0, needNewCode: 1 }) return jsonp(url, data, options) }
#2.4 recommend.vue檔案呼叫
在專案目錄下的src>components>recommend>對應的檔案.vue
<template> <p class="recommend"> recommend </p> </template> <script type="text/ecmascript-6"> import {getRecommend} from 'api/recommend' import {ERR_OK} from 'api/config' export default { name: 'recommend', created() { this._getRecommend() }, methods: { _getRecommend() { getRecommend().then((res) => { if (res.code === ERR_OK) { console.log(res.data.slider) } }) } } } </script>
2.5 頁面jsonp請求成功結果
#我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:以上是VUE2.0中Jsonp使用步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!