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

一、使用axios

  1、安装axios模块

  1. npm install --save axios

  2、引用模块

  1. import axios from 'axios'

  3、实现请求

  1. import axios from 'axios';
  2.  
  3. const request = (url: string, params = {}, data = {}, options) => {
  4. // debug(url, params);return new Promise((resolve, reject) => {
  5. axios({url, params, data, ...options})
  6. .then((response) => {
  7. // debug(response);
  8. // 请求返回为json格式, 则response.data必须为对象,且必须有固定的格式,
  9. // 这里没有处理返回值为字符串的情况, 目前没有这样的需求
  10. reject(response);
  11. })
  12. .catch((error) => {
  13. debug(error);
  14. reject(error);
  15. });
  16. });
  17. };
  18.  
  19. export function get (url: string, params?: any, options?: any) {
  20. return request(url, params, undefined, {method: 'get', ...options});
  21. }
  22.  
  23. export function post (url: string, data?: any, options?: any) {
  24. return request(url, undefined, data, {method: 'post', ...options});
  25. }
  26.  
  27. //这段代码还没有经过测试,如果不行可以尝试下面代码
    request = (url) => {
      axios.get(url)
       .then((res) => {
        console.log(res);
       })
    .catch((err) => {
      console.log(err);
    })
    }

二、使用fetchJsonp

  1、安装fetchJsonp模块

  1. npm install --save fetchJsonp

  2、引用模块

  1. import fetchJsonp from 'fetch-jsonp';

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

  1. import fetchJsonp from 'fetch-jsonp';
  2.  
  3. jsonp (url: string, callback = null) {
  4. return new Promise((resolve, reject) => {
  5. fetchJsonp(url, {callback})
  6. .then((res) => {
  7. resolve(res);
  8. })
  9. .catch((err) => {
  10. debug(err);
  11. })
  12. })
  13. }

这里说下fetchJsonp的问题

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

  1. let script = document.createElement('script');
  2. script.type = 'text/javascript';
  3. script.src = 'http://192.168.1.100:7700/Advert/GetAdvert?elementId=adid';
  4. document.getElementById(this.props.htmlId).appendChild(script);
  5.  
  6. <div id={this.props.htmlId} style={this.props.styles}></div>
  1. 下面代码是接口http://192.168.1.100:7700/Advert/GetAdvert?elementId=adid返回的信息,其实是向代码中插入一个函数,自动运行,类似前端调用函数
  1. (function(){
  2. 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":"图片广告"};
  3. var elementId = '';
  4. var div = document.createElement("div");
  5. div.setAttribute
  6. div.style.width = "100%";
  7. div.style.overflow = "hidden";
  8. var img = document.createElement("img");
  9. img.src = json.AdvertImage;
  10. img.style.maxWidth="100%";
  11. img.onclick = function(){location.href=json.JumpUrl;}
  12. div.appendChild(img);
  13.  
  14. if(elementId == '')
  15. {
  16. var scripts = document.getElementsByTagName("script");
  17. var script = scripts[scripts.length - 1];
  18. var dom = script.parentNode;
  19. dom.removeChild(script);
  20. dom.appendChild(div);
  21. }
  22. else
  23. {
  24. var dom = document.getElementById('');
  25. dom.appendChild(div);
  26. }
  27.  
  28. div = null;
  29. img = null;
  30. scripts = null;
  31. script = null;
  32. dom = null;
  33. })();
  1.  

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

React 获取服务器API接口数据:axios、fetchJsonp的更多相关文章

  1. 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用

    react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...

  2. 传递多个参数并获取Web API的数据

    近段时间学习Web Api觉得非常有意思.默认的路由情况之下,获取数据时,它不必指定Action操作名. 还有另外感想,就是自从学习asp.net MVC之后,加上jQuery,让Insus.NET已 ...

  3. 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析

    使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...

  4. HttpClient get和HttpClient Post请求的方式获取服务器的返回数据

    1.转自:https://blog.csdn.net/alinshen/article/details/78221567?utm_source=blogxgwz4 /*  * 演示通过HttpClie ...

  5. PHP--通用化API接口数据输出 封装

    /** * 通用化API接口数据输出 * author qinpeizhou * @param $message * @param array $data * @param int $httpCode ...

  6. Html网页使用jQuery传递参数并获取Web API的数据

    昨天Insus.NET有开始学习Web API,<ASP.NET MVC的Web Api的实练>http://www.cnblogs.com/insus/p/4334316.html .其 ...

  7. 微信小程序入门教程(一)API接口数据记录

    今天测试用小程序调用API接口,发现有些数据打印都是对象,怎么全部打印详细点来 小程序代码: httpsearch: function (name, offset, type, cb) { wx.re ...

  8. 使用js+Ajax请求API接口数据-带请求头方式

    C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...

  9. C# 后台获取API接口数据

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

随机推荐

  1. HBASE 优化之REGIONSERVER

    HBASE 优化之REGIONSERVER 一,概述 本人在使用优化regionserver的过程有些心得,借此随笔的机会,向大家介绍我的心得,有些是网上拿来的有些是自己在使用过程自己的经验,希望对大 ...

  2. 第6章 Hyperledger Fabric模型

    This section outlines the key design features woven into Hyperledger Fabric that fulfill its promise ...

  3. Rabbit MQ

    前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: 1.其实我们在双11的时候,当我们凌晨大量的秒杀和抢购商品,然后去结算的时候, ...

  4. VS快捷键大全(总结了一些记忆的口诀)(转载)

    相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...

  5. DockerFile详解--转载

    COPY 复制文件 格式: COPY ... COPY ["",... ""] 和 RUN 指令一样,也有两种格式,一种类似于命令行,一种类似于函数调用. CO ...

  6. docker容器以ROOT账号登录(获取ROOT权限/ROOT密码)

    第一步:查看容器的CONTAINER ID docker ps 第二步:获取root权限,例如需要进入的CONTAINER ID为4650e8d1bcca docker exec -ti -u roo ...

  7. Linux基础入门-基本概念及操作

    桌面环境: KDE.GNOME.XFCE.LXDE 实验楼使用的是XFCE 终端: gnome-terminal, kconsole, xterm, rxvt, kvt, nxterm, eterm ...

  8. ISE_pll_ip的建立

    创建clk的ip核以及设置PLL的时钟输出 原理:外部晶振输入50M的频率,由ip核输出想要的频率 1.新建工程model再在"芯片"名称上建立clk的ip核 2.设置输入写为50 ...

  9. C#读写Excel实践笔记

    使用第三类包:NPOI 介绍 Github地址:https://github.com/tonyqus/npoi,Java POI项目的.NET版. 通过它可以在没有安装Office软件的情况下,快速的 ...

  10. 通俗易懂理解Linux文件权限修改chmod命令

    chmod g+w filename 给同组用户增加filename文件的写权限 chmod go+rw filename 给同组和组外用户增加写和读的权限 chmod g-w filename 给同 ...