jsonp的使用

基础

JSONP的基本思想是，网页通过添加一个

当通过

使用jsonp的原因

在使用VUE的前端框架的时候，请求数据使用axios的情况下，axios不支持jsonp请求，这种情况下可以使用ajax请求，不过一般在vue中不使用jquery，所以采用jsonp来实现功能。

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

1. 从浏览器中创建 XMLHttpRequest
2. 从 node.js 发出 http 请求
3. 支持 Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防止 CSRF/XSRF

jsonp 的安装

$ npm install jsonp

jsonp的使用

1. 引入jsonp

import Jsonp from 'jsonp';

2.jsonp的API

jsonp(url, opts, fn)

3. jsonp的使用

let url = 'https://*********';
// 请求的接口地址
/* this.queryParam是传递的参数 */
// { name: 'callback' } 是回掉参数，需要写
Jsonp(url + this.queryParam, { name: 'callback' }, (err, data) => {
		if (err) {
            throw (err);
         }
         console.log('data', data);
});

对数据参数的格式处理（处理为所需的格式）

arrToQueryString (arr) {
	arr.forEach((item, index) => {
		this.queryParam = this.queryParam + Object.keys(item).map(function (key) {
			let trueKey = 'keywords[' + index + '][' + key + ']';
				return ''.concat(encodeURIComponent(trueKey), '=').concat(encodeURIComponent(item[key])) + '&';
                }).join('');
            });
            return this.queryParam;
        },

总结

1.jsonp的数据格式有严格的标准，需要按照文档API来写
2. {name: ‘callback’}很重要，需要写上，即使为空也需要写
3. 附上GitHub 地址。
Jsonp文档 github