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);
      });
  });
};

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

export function 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);

<div id={this.props.htmlId} style={this.props.styles}></div>

下面代码是接口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(){} ,可以查看它的原代码