返回 导航

React / React Native

hangge.com

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

作者：hangge | 2017-05-18 08:10

一、SuperAgent 介绍、安装使用

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

1，安装配置

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

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

（2）然后在需要使用 SuperAgent 的 js 文件的头部通过 require 将模块引用进来即可。 
var request = require('superagent');

2，简单的样例

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

（2）样例代码
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 请求 

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

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

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

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

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

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

注意：由于 DELETE 是特殊的保留字段，方法命名为 .del() 
request.del('https://httpbin.org/get')
.end(function(err, res){
   alert(res.text);
});

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

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

三、请求头设置（header fields）

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

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

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

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 
request.get('https://httpbin.org/get')
.query({ query: 'Manny' })
.query({ range: '1..5' })
.end(function(err, res){
  alert(res.text);
});
当然把所以参数放在一个对象中也可以： 
request.get('https://httpbin.org/get')
.query({ query: 'Manny', range: '1..5' })
.end(function(err, res){
  alert(res.text);
});

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

request.get('https://httpbin.org/get')
.query('search=Manny')
.query('range=1..5')
.end(function(err, res){
  alert(res.text);
});
当然把多个参数字符串写在一起也是可以的： 
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 字符串
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 对象，下面代码效果同上面一样。 
request.post('https://httpbin.org/post')
.send({ name: 'tj', pet: 'tobi' })
.end(function(err, res){
    alert(res.text);
});
可以多次使用 .send() 方法将发送的数据分开。 
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 方式提交数据 
request.post('https://httpbin.org/post')
.send('name=tj')
.send('pet=tobi')
.end(function(err, res){
    alert(res.text);
});

（2）通过设置 Content-Type，也可以使下面对象使用 form 方式提交数据。 
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，下面代码效果和上面一样。 
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 
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() 方法进行完整设置 

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

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

（1）该方法既接受规范的 MIME 类型名称。 
request.post('https://httpbin.org/get')
.type('Content-Type', 'application/json')

（2）也接受简单的扩展名称，比如：xml、json、png 等等。 
request.post('https://httpbin.org/get')
.type('json')

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

七、自动重新请求

使用 .retry() 方法，当请求失败或网络异常时，会继续尝试再次请求。
该方法可以设置最大尝试次数（失败次数），默认值为 3。 
request.get('https://httpbin.org/get')
.retry(2)
.end(function(err, res){
  alert(res.text);
});
评论

全部评论（0）

回到顶部