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

一、SuperAgent 介绍、安装使用

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

GitHub 主页地址： https://github.com/visionmedia/superagent/

1，安装配置

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

（1）在“ 终端”中进入项目目录，运行如下命令下载安装  SuperAgent。

1	npm install superagent

（2）然后在需要使用  SuperAgent  的  js  文件的头部通过  require  将模块引用进来即可。

1	var  request = require( 'superagent' );

2，简单的样例

（1）效果图

点击“ 获取数据”按钮后，便使用  SuperAgent 发起网络数据请求，并将返回的结果显示在页面上。

          

（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' ;   var  request = require( 'superagent' );   //默认应用的容器组件 class App extends Component {      //构造函数     constructor(props) {        super (props);        this .state = {          responseText :  null        };     }       //渲染     render() {        return  (          <View style={styles.container}>           <Text style={styles.item} onPress={ this .doRequest.bind( this )}>获取数据</Text>           <Text>{ this .state.responseText}</Text>          </View>        );     }       //开始请求数据     doRequest(){       var  _that =  this ;       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' , () => App);

二、 基本用法

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

1 2 3 4

request.get( 'https://httpbin.org/get' ) .end( function (err, res){     alert(res.text); });

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

1 2 3

request( 'GET' ,  'https://httpbin.org/get' ).end( function (err, res){     alert(res.text); });

3，支持 ES6，可以使用 .then() 来代替 .end()

1	request( 'GET' ,  'https://httpbin.org/get' ).then(success, failure);

4，除了 GET，DELETE, HEAD, POST, PUT 以及其他 HTTP 请求都可使用

注意：由于  DELETE  是特殊的保留字段，方法命名为  .del()

1 2 3 4

request.del( 'https://httpbin.org/get' ) .end( function (err, res){     alert(res.text); });

5，如果是 GET 请求，可以使用下面的最简写法

1 2 3

request( 'https://httpbin.org/get' ,  function (err, res){     alert(res.text); });

三、请求头设置（header fields）

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

1 2 3 4 5 6

request.get( 'https://httpbin.org/get' ) .set( 'API-Key' ,  'foobar' ) .set( 'Accept' ,  'application/json' ) .end( function (err, res){    alert(res.text); });

2，也可以使用对象同时设置多个字段

1 2 3 4 5

request.get( 'https://httpbin.org/get' ) .set({ 'API-Key' :  'foobar' , Accept:  'application/json' }) .end( function (err, res){    alert(res.text); });

四、GET 请求说明

.query()  方法可以接收参数并生成查询串，同时该方法可以接收多种类型的参数。

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

比如下面样例最终得到的请求路径为： https://httpbin.org/get?query=Manny&range=1..5

1 2 3 4 5 6

request.get( 'https://httpbin.org/get' ) .query({ query:  'Manny'  }) .query({ range:  '1..5'  }) .end( function (err, res){    alert(res.text); });

当然把所以参数放在一个对象中也可以：

1 2 3 4 5

request.get( 'https://httpbin.org/get' ) .query({ query:  'Manny' , range:  '1..5'  }) .end( function (err, res){    alert(res.text); });

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

1 2 3 4 5 6

request.get( 'https://httpbin.org/get' ) .query( 'search=Manny' ) .query( 'range=1..5' ) .end( function (err, res){    alert(res.text); });

当然把多个参数字符串写在一起也是可以的：

1 2 3 4 5

request.get( 'https://httpbin.org/get' ) .query( 'search=Manny&range=1..5' ) .end( function (err, res){    alert(res.text); });

五、POST/PUT 请求说明

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

（1）发送一个  JSON 字符串

1 2 3 4 5 6

request.post( 'https://httpbin.org/post' ) .set( 'Content-Type' ,  'application/json' ) .send( '{"name":"tj","pet":"tobi"}' ) .end( function (err, res){      alert(res.text); });

（2）也可以发送  JSON 对象，下面代码效果同上面一样。

1 2 3 4 5

request.post( 'https://httpbin.org/post' ) .send({ name:  'tj' , pet:  'tobi'  }) .end( function (err, res){      alert(res.text); });

可以多次使用  .send() 方法将发送的数据分开。

1 2 3 4 5 6

request.post( 'https://httpbin.org/post' ) .send({ name:  'tj'  }) .send({ pet:  'tobi'  }) .end( function (err, res){      alert(res.text); });

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

（1）如果发送的是字符串，默认情况下就是使用  form 方式提交数据

1 2 3 4 5 6

request.post( 'https://httpbin.org/post' ) .send( 'name=tj' ) .send( 'pet=tobi' ) .end( function (err, res){      alert(res.text); });

（2）通过设置  Content-Type，也可以使下面对象使用  form 方式提交数据。

1 2 3 4 5 6

request.post( 'https://httpbin.org/post' ) .set( 'Content-Type' ,  'application/x-www-form-urlencoded' ) .send({ name:  'tj' , pet:  'tobi'  }) .end( function (err, res){      alert(res.text); });

使用  .type() 方法可以很方便地设置  Content-Type，下面代码效果和上面一样。

1 2 3 4 5 6

request.post( 'https://httpbin.org/post' ) .type( 'form' ) .send({ name:  'tj' , pet:  'tobi'  }) .end( function (err, res){      alert(res.text); });

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

.query() 可以建立一个查询字符串，添加到链接地址后面： ?format=json&dest=/login

1 2 3 4 5 6 7

request.post( 'https://httpbin.org/post' ) .query({ format:  'json'  }) .query({ dest:  '/login'  }) .send({ name:  'tj' , pet:  'tobi'  }) .end( function (err, res){      alert(res.text); });

六、设置 Content-Type

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

1 2	request.post( 'https://httpbin.org/get' ) .set( 'Content-Type' ,  'application/json' )

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

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

1 2	request.post( 'https://httpbin.org/get' ) .type( 'Content-Type' ,  'application/json' )

（2）也接受简单的扩展名称，比如： xml、 json、 png 等等。

1 2 3 4 5

request.post( 'https://httpbin.org/get' ) .type( 'json' )   request.post( 'https://httpbin.org/get' ) .type( 'png' )

七、自动重新请求

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

1 2 3 4 5

request.get( 'https://httpbin.org/get' ) .retry(2) .end( function (err, res){    alert(res.text); });

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