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(){} ,可以查看它的原代码
React 获取服务器API接口数据:axios、fetchJsonp的更多相关文章
- 十一、React 获取服务器数据: axios插件、 fetch-jsonp插件的使用
react获取服务器APi接口的数据: react中没有提供专门的请求数据的模块.但是我们可以使用任何第三方请求数据模块实现请求数据 一.axios 获取Api数据 使用文档:https://www. ...
- 传递多个参数并获取Web API的数据
近段时间学习Web Api觉得非常有意思.默认的路由情况之下,获取数据时,它不必指定Action操作名. 还有另外感想,就是自从学习asp.net MVC之后,加上jQuery,让Insus.NET已 ...
- 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析
使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...
- HttpClient get和HttpClient Post请求的方式获取服务器的返回数据
1.转自:https://blog.csdn.net/alinshen/article/details/78221567?utm_source=blogxgwz4 /* * 演示通过HttpClie ...
- PHP--通用化API接口数据输出 封装
/** * 通用化API接口数据输出 * author qinpeizhou * @param $message * @param array $data * @param int $httpCode ...
- Html网页使用jQuery传递参数并获取Web API的数据
昨天Insus.NET有开始学习Web API,<ASP.NET MVC的Web Api的实练>http://www.cnblogs.com/insus/p/4334316.html .其 ...
- 微信小程序入门教程(一)API接口数据记录
今天测试用小程序调用API接口,发现有些数据打印都是对象,怎么全部打印详细点来 小程序代码: httpsearch: function (name, offset, type, cb) { wx.re ...
- 使用js+Ajax请求API接口数据-带请求头方式
C# http请求带请求头部分 先上代码: <script type="text/javascript"> function zLoginCheck() { var A ...
- C# 后台获取API接口数据
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...
随机推荐
- HBASE 优化之REGIONSERVER
HBASE 优化之REGIONSERVER 一,概述 本人在使用优化regionserver的过程有些心得,借此随笔的机会,向大家介绍我的心得,有些是网上拿来的有些是自己在使用过程自己的经验,希望对大 ...
- 第6章 Hyperledger Fabric模型
This section outlines the key design features woven into Hyperledger Fabric that fulfill its promise ...
- Rabbit MQ
前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: 1.其实我们在双11的时候,当我们凌晨大量的秒杀和抢购商品,然后去结算的时候, ...
- VS快捷键大全(总结了一些记忆的口诀)(转载)
相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...
- DockerFile详解--转载
COPY 复制文件 格式: COPY ... COPY ["",... ""] 和 RUN 指令一样,也有两种格式,一种类似于命令行,一种类似于函数调用. CO ...
- docker容器以ROOT账号登录(获取ROOT权限/ROOT密码)
第一步:查看容器的CONTAINER ID docker ps 第二步:获取root权限,例如需要进入的CONTAINER ID为4650e8d1bcca docker exec -ti -u roo ...
- Linux基础入门-基本概念及操作
桌面环境: KDE.GNOME.XFCE.LXDE 实验楼使用的是XFCE 终端: gnome-terminal, kconsole, xterm, rxvt, kvt, nxterm, eterm ...
- ISE_pll_ip的建立
创建clk的ip核以及设置PLL的时钟输出 原理:外部晶振输入50M的频率,由ip核输出想要的频率 1.新建工程model再在"芯片"名称上建立clk的ip核 2.设置输入写为50 ...
- C#读写Excel实践笔记
使用第三类包:NPOI 介绍 Github地址:https://github.com/tonyqus/npoi,Java POI项目的.NET版. 通过它可以在没有安装Office软件的情况下,快速的 ...
- 通俗易懂理解Linux文件权限修改chmod命令
chmod g+w filename 给同组用户增加filename文件的写权限 chmod go+rw filename 给同组和组外用户增加写和读的权限 chmod g-w filename 给同 ...