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(){} ,可以查看它的原代碼