jsonp react 获取返回值_React 获取服务器API接口数据：axios、fetchJsonp

使用axios、fetchJsonp获取服务器的接口数据。其中fetchJsonp是跨域访问

一、使用axios

1、安装axios模块

npm install --save axios

2、引用模块

import axios from 'axios'

3、实现请求

import axios from 'axios';

const request = (url: string, params = {}, data = {}, options) =>{//debug(url, params);return new Promise((resolve, reject) =>{

axios({url, params, data, ...options})

.then((response)=>{//debug(response);

//请求返回为json格式， 则response.data必须为对象，且必须有固定的格式,

//这里没有处理返回值为字符串的情况， 目前没有这样的需求 reject(response);})

.catch((error) =>{

debug(error);reject(error);});

});

};

exportfunction get (url: string, params?: any, options?: any) {return request(url, params, undefined, {method: 'get', ...options});

}

exportfunction post (url: string, data?: any, options?: any) {return request(url, undefined, data, {method: 'post', ...options});

}

//这段代码还没有经过测试，如果不行可以尝试下面代码

request = (url) => {

axios.get(url)

.then((res) => {

console.log(res);

})

.catch((err) => {

console.log(err);

})

}

二、使用fetchJsonp

1、安装fetchJsonp模块

npm install --save fetchJsonp

2、引用模块

import fetchJsonp from 'fetch-jsonp';

3、使用(还没有测试的)

import fetchJsonp from 'fetch-jsonp';

jsonp (url: string, callback = null) {return new Promise((resolve, reject) =>{

fetchJsonp(url, {callback})

.then((res)=>{

resolve(res);

})

.catch((err) =>{

debug(err);

})

})

}

这里说下fetchJsonp的问题

在代码中应该使用script标签，引用js文件

let script = document.createElement('script');

script.type = 'text/javascript';

script.src = 'http://192.168.1.100:7700/Advert/GetAdvert?elementId=adid';document.getElementById(this.props.htmlId).appendChild(script);

下面代码是接口http://192.168.1.100:7700/Advert/GetAdvert?elementId=adid返回的信息，其实是向代码中插入一个函数，自动运行，类似前端调用函数

(function(){

var json = {"AdvertName":"图片广告","AdvertDesc":"图片广告","AdvertHeight":"100%","AdvertId":63102,

"AdvertImage":"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=831914849,3674285067&fm=11&gp=0.jpg",

"AdvertWidth":"100%","JumpUrl":"http://192.168.2.88:7700/advert/JumpAdvert?advertId=63102&flowerId=1987&orderMark=7c3a8f5172494fcab09e5eee607aae66&merchantCode=",

"AdvertWord":"图片广告"};

var elementId = '';

var div = document.createElement("div");

div.setAttribute

div.style.width = "100%";

div.style.overflow = "hidden";

var img = document.createElement("img");

img.src = json.AdvertImage;

img.style.maxWidth="100%";

img.onclick = function(){location.href=json.JumpUrl;}

div.appendChild(img);

if(elementId == '')

{

var scripts = document.getElementsByTagName("script");

var script = scripts[scripts.length - 1];

var dom = script.parentNode;

dom.removeChild(script);

dom.appendChild(div);

}

else

{

var dom = document.getElementById('');

dom.appendChild(div);

}

div = null;

img = null;

scripts = null;

script = null;

dom = null;

})();

fetchJsonp也类似这样，它使用的window[function_name] = function(){} ,可以查看它的原代码