React Native - 网络请求库SuperAgent使用详解1（数据请求）

React 前端之家
前端之家收集整理的这篇文章主要介绍了React Native - 网络请求库SuperAgent使用详解1（数据请求），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、SuperAgent 介绍、安装使用

  • SuperAgent@H_403_8@是一个流行的第三方Ajax@H_403_8@库，专注于处理服务端/客户端的http@H_403_8@请求。
  • 对比现存的各种请求API@H_403_8@库，SuperAgent@H_403_8@更加轻量、优雅、易读、易学。
  • 最重要的是它可以用于Node.js@H_403_8@
GitHub@H_403_8@主页地址： https://github.com/visionmedia/superagent/

1，安装配置

下面介绍如何在 React Native@H_403_8@项目中安装配置 SuperAgent@H_403_8@。

（1）在“ 终端@H_403_8@”中进入项目目录，运行如下命令下载安装
1
npm install superagent

（2）然后在需要使用@H_403_8@ SuperAgent@H_403_8@ 的@H_403_8@ js@H_403_8@ 文件的头部通过@H_403_8@ require@H_403_8@ 将模块引用进来即可。@H_403_8@
varrequest = require('superagent');
2，简单的样例 （1）效果图@H_403_8@
点击“ 获取数据@H_403_8@”按钮后，便使用 SuperAgent@H_403_8@发起网络数据请求，并将返回的结果显示在页面上。

（2）样例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React,{ Component } from 'react' ;
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native' ;
);
@H_389_301@
//默认应用的容器组件
class App extends Component {
//构造函数
constructor(props) {
super (props);
this .state = {
responseText : null
};
}
//渲染
render() {
return (
<View style={styles.container}>
<Text style={styles.item} onPress={ .doRequest.bind( )}>获取数据</Text>
<Text>{ .state.responseText}</Text>
</View>
);
}
//开始请求数据
doRequest(){
_that = ;
request.get( 'https://httpbin.org/get' )
.end( function (err,res){
_that.setState({responseText: res.text})
console.log(res);
});
}
}
//样式定义
const styles = StyleSheet.create({
container:{
flex: 1,
marginTop:25
},
item:{
margin:15,
height:30,
borderWidth:1,
padding:6,
borderColor: '#ddd' ,
textAlign: 'center'
});
AppRegistry.registerComponent( 'ReactDemo'

二、 基本用法

1，下面是一个简单的 Get 请求

4
)
alert(res.text);
});

2，使用方法字符串写法也是可以的

3
request( 'GET' ).end( alert(res.text); @H_502_538@3，支持 ES6，可以使用 .then() 来代替 .end()
).then(success,failure);

4，除了 GET，DELETE,HEAD,POST,PUT 以及其他 HTTP 请求都可使用 注意：由于@H_403_8@ DELETE@H_403_8@ 是特殊的保留字段，方法命名为@H_403_8@ .del()@H_403_8@
1
request.del( 5，如果是 GET 请求，可以使用下面的最简写法
三、请求头设置（header fields）

1，可以使用 .set() 方法单独设置每个字段

1
2
3
6
)
.set( 'API-Key' 'foobar' )
'Accept' 'application/json' )
alert(res.text);
2，也可以使用对象同时设置多个字段
2
5
.set({ : })
alert(res.text);
四、GET 请求说明 .query()@H_403_8@ 方法可以接收参数并生成查询串，同时该方法可以接收多种类型的参数。@H_403_8@

1，.query() 方法可以接收对象类型的参数

比如下面样例最终得到的请求路径为： https://httpbin.org/get?query=Manny&range=1..5@H_403_8@
1
2
3
4
5
6
request.get( 'https://httpbin.org/get' )
.query({ query: 'Manny' })
.query({ range: '1..5' })
.end( function alert(res.text);
});
当然把所以参数放在一个对象中也可以：
2
3
5
})
alert(res.text);
});

2，.query() 方法也接受字符串类型的参数

.query('search=Manny')
'range=1..5' )
});
当然把多个参数字符串写在一起也是可以的：
'search=Manny&range=1..5')
});

五、POST/PUT 请求说明

1，JSON 方式提交数据（application/json）

（1）发送一个 JSON@H_403_8@字符串
request.post('https://httpbin.org/post'.set('Content-Type''application/json'.send('{"name":"tj","pet":"tobi"}'});

（2）也可以发送 JSON@H_403_8@对象，下面代码效果同上面一样。
.send({ name:'tj''tobi'});
可以多次使用 .send()@H_403_8@方法将发送的数据分开。
.send({ pet:});

2，form 表单方式提交数据（application/x-www-form-urlencoded）

（1）如果发送的是字符串，默认情况下就是使用 form@H_403_8@方式提交数据
'name=tj''pet=tobi'});

（2）通过设置 Content-Type@H_403_8@，也可以使下面对象使用 form@H_403_8@方式提交数据。
'application/x-www-form-urlencoded'});
使用 .type()@H_403_8@方法可以很方便地设置 Content-Type@H_403_8@，下面代码效果和上面一样。
.type('form'});

3，POST 请求同样可以设置查询字符串

.query()@H_403_8@可以建立一个查询字符串，添加到链接地址后面： ?format=json&dest=/login@H_403_8@
6
7
.query({ format: 'json' .query({ dest: '/login' })
alert(res.text);
});

六、设置 Content-Type

1，使用 .set() 方法进行完整设置

2
)

2，使用 .type() 进行快速设置

（1）该方法既接受规范的 MIME@H_403_8@类型名称。
)

（2）也接受简单的扩展名称，比如： xml@H_403_8@、 json@H_403_8@、 png@H_403_8@等等。
4
5
)
'png' )

七、自动重新请求

使用 .retry()@H_403_8@方法，当请求失败或网络异常时，会继续尝试再次请求。
该方法可以设置最大尝试次数（失败次数），默认值为 3@H_403_8@。
.retry(2)
});

原文出自：@H_403_8@ www.hangge.com 转载请保留原文链接：@H_403_8@ http://www.hangge.com/blog/cache/detail_1622.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作