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 发起网络数据请求,并将返回的结果显示在页面上。
   原文:React Native - 网络请求库SuperAgent使用详解1(数据请求)      原文:React Native - 网络请求库SuperAgent使用详解1(数据请求)

(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)也接受简单的扩展名称,比如:xmljsonpng 等等。
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
发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

安装npm install时出现错误

08-23

我是在win8上面操作,需要在github上面克隆一个项目在本地编辑 在nodejs官网上面下载了一个安装包,安装后进行了如下操作 1:新建了一个文件夹,用virtualenv做成虚拟环境 2:将github上面的项目clone到该文件夹 3:将该文件夹进入venv虚拟环境 4:安装Python的依赖包flask之类的 5:进入项目的static文件夹,(这里面有package.json文件,dependencies里有一项是"sass-loader": "^2.0.0",) 输入了如下命令:npm install 错误如下: ``` Building: C:\Program Files\nodejs\node.exe node_modules\pangyp\bin\node-gyp rebuild --libsass_ext= --libsass_cflags= --libsa ss_ldflags= --libsass_library= gyp WARN install got an error, rolling back install gyp ERR! configure error gyp ERR! stack Error: node-v0.12.7.tar.gz local checksum 88bc1dbe3f1da75a4b5eabea55ab1f40a99373b8ae7356d2374e8053ced04ec0 no 42e53067127a5061415be7e12f39d gyp ERR! stack at deref (E:\project1_2\shijuan\node_modules\node-sass\node_modules\pangyp\lib\install.js:304:20) gyp ERR! stack at Request.<anonymous> (E:\project1_2\shijuan\node_modules\node-sass\node_modules\pangyp\lib\install.js:3 gyp ERR! stack at Request.emit (events.js:129:20) gyp ERR! stack at IncomingMessage.<anonymous> (E:\project1_2\shijuan\node_modules\node-sass\node_modules\pangyp\node_mod gyp ERR! stack at IncomingMessage.emit (events.js:129:20) gyp ERR! stack at _stream_readable.js:908:16 gyp ERR! stack at process._tickCallback (node.js:355:11) gyp ERR! System Windows_NT 6.3.9600 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\project1_2\\shijuan\\node_modules\\node-sass\\node_modules\\pang ibsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd E:\project1_2\shijuan\node_modules\node-sass gyp ERR! node -v v0.12.7 gyp ERR! pangyp -v v2.3.0 gyp ERR! not ok Build failed ``` 不知道是哪个地方的原因,希望各位老师不吝赐教,谢谢 问答

用npm安装package.json时出现错误

08-24

我是在win8 64bit上面操作,本来安装的nodejs是64位的, npm install时一直出现错误,上网查后有说要安装32位的,而且需要安装vs, 于是我卸载64的node又安装32的node,又安装vs2012, 然后又npm install 出现如下异常: ``` npm WARN optional dep failed, continuing fsevents@0.3.8 \ > spawn-sync@1.0.13 postinstall E:\project2\shijuan\node_modules\node-sass\node_modules\sas modules\spawn-sync > node postinstall \ > node-sass@3.2.0 install E:\project2\shijuan\node_modules\node-sass > node scripts/install.js Binary downloaded and installed at E:\project2\shijuan\node_modules\node-sass\vendor\win32- > node-sass@3.2.0 postinstall E:\project2\shijuan\node_modules\node-sass > node scripts/build.js ` E:\project2\shijuan\node_modules\node-sass\vendor\win32-ia32-14\binding.node ` exists. testing binary. Binary is fine; exiting. \ > bufferutil@1.1.0 install E:\project2\shijuan\node_modules\webpack-dev-server\node_modules > node-gyp rebuild | (venv) Think@RESEARCH E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\sock > if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_modules\npm\ e rebuild ) 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 bufferutil.cc 正在创建库 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.io\ util .expb 和对象 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.io\n 正在生成代码 已完成代码的生成 bufferutil.vcxproj -> E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\so se\\bufferutil.node | > utf-8-validate@1.1.0 install E:\project2\shijuan\node_modules\webpack-dev-server\node_mod f-8-validate > node-gyp rebuild / (venv) Think@RESEARCH E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\sock ate > if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_modules\npm\ e rebuild ) 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 validation.cc 正在创建库 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.io- ild\ Release\validation.lib 和对象 E:\project2\shijuan\node_modules\webpack-dev-server\node_mo tf -8-validate\build\Release\validation.exp 正在生成代码 已完成代码的生成 validation.vcxproj -> E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\so lidate\build\Release\\validation.node > utf-8-validate@1.1.0 install E:\project2\shijuan\node_modules\webpack-dev-server\node_mod > node-gyp rebuild (venv) Think@RESEARCH E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\sock > if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_modules\npm\ e rebuild ) 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 validation.cc 正在创建库 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.io\ lida tion.lib 和对象 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.i va lidation.exp 正在生成代码 已完成代码的生成 validation.vcxproj -> E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\so elease\\validation.node > bufferutil@1.1.0 install E:\project2\shijuan\node_modules\webpack-dev-server\node_modules util > node-gyp rebuild (venv) Think@RESEARCH E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\sock > if not defined npm_config_node_gyp (node "C:\Program Files (x86)\nodejs\node_modules\npm\ e rebuild ) 在此解决方案中一次生成一个项目。若要启用并行生成,请添加“/m”开关。 bufferutil.cc 正在创建库 E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\socket.io- Rele ase\bufferutil.lib 和对象 E:\project2\shijuan\node_modules\webpack-dev-server\node_module ru til\build\Release\bufferutil.exp 正在生成代码 已完成代码的生成 bufferutil.vcxproj -> E:\project2\shijuan\node_modules\webpack-dev-server\node_modules\so il\build\Release\\bufferutil.node vinyl-named@1.1.0 node_modules\vinyl-named └── through@2.3.8 manifest-revision-webpack-plugin@0.0.5 node_modules\manifest-revision-webpack-plugin └── walk@2.3.9 (foreachasync@3.0.0) coffee-script@1.9.3 node_modules\coffee-script superagent@1.3.0 node_modules\superagent ├── extend@1.2.1 ├── methods@1.0.1 ├── cookiejar@2.0.1 ├── component-emitter@1.1.2 ├── reduce-component@1.0.1 ├── mime@1.3.4 ├── qs@2.3.3 ├── debug@2.2.0 (ms@0.7.1) ├── readable-stream@1.0.27-1 (inherits@2.0.1, isarray@0.0.1, string_decoder@0.10.31, core-u ├── formidable@1.0.14 └── form-data@0.2.0 (async@0.9.2, combined-stream@0.0.7, mime-types@2.0.14) ``` 其实看上去也成功了很多,但是前面那几个异常怎么解决呢?谢谢各位 package.json如下 ``` { "repository": { "type": "git", "url": "" }, "license": "MIT", "description": "Project Shijuan", "scripts": { "start": "node_modules/.bin/webpack-dev-server --config conf/webpack.config.js --progress --colors --port 5001 --content-base build/public", "build": "node_modules/.bin/webpack --config conf/webpack.config.js --progress --profile --colors" }, "dependencies": { "amazeui": "^2.4.2", "babel-core": "^5.4.7", "babel-loader": "^5.1.3", "coffee-loader": "^0.7.2", "coffee-script": "^1.9.3", "css-loader": "^0.15.6", "echarts": "^2.2.7-beta7", "extract-text-webpack-plugin": "^0.8.1", "file-loader": "^0.8.4", "html-loader": "^0.3.0", "jquery": "^2.1.4", "manifest-revision-webpack-plugin": "^0.0.5", "node-sass": "^3.2.0", "postcss-loader": "^0.5.1", "sass-loader": "^2.0.0", "style-loader": "^0.12.3", "superagent": "^1.3.0", "url-loader": "^0.5.6", "vinyl-named": "^1.1.0", "vue": "^0.12.10", "vue-loader": "^2.1.1", "vue-validator": "^1.4.0", "webpack": "^1.10.0", "webpack-dev-server": "^1.9.0", "zrender": "ecomfe/zrender" } } ``` 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览