jsonp原理
JSON是一种轻量级的数据传输格式。
JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。
jsonp封装
import originJSONP from 'jsonp' export default function jsonp (url, data, option) {
//url接口拼接 url += (url.indexOf('?') < 0 ? '?' : '&') + prarm(data) //es6的promise对象 return new Promise((resolve, reject) => { originJSONP(url, option, (err, data) => { if (!err) { resolve(data) } else { reject(err) } }) }) } function prarm (data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k] : '' url += `&${k}=${encodeURIComponent(value)}` } return url ? url.substring(1) : '' }
jsonp应用
export const options = { param: 'jsonpCallback' }
import { commonParams, options } from './config'
import jsonp from 'common/js/jsonp'
export function getRecommend () {
//请求地址 const url = ''
//请求数据凭借
const data = Object.assign({}, commonParams, { uin: 0 }) return jsonp(url, data, options) }
data () { return { recommoneds: [] } }, created () { this._getRecommend() }, methods: { _getRecommend () { getRecommend().then(res => { if (res.code === ERR_OK) { this.recommoneds = res.data console.log(res.data) } }) } },
很简单的一个跨域拿数据