React 中 调用 Asp.net WebApi
1、安装node 相关包
npm install --save react react-dom superagent
2、安装gulp相关包
npm install --save gulp-browserify gulp reactify gulp-connect
3、编写gulpfile.js 构建React文件 
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
reactify = require('reactify'),
connect = require('gulp-connect');
gulp.task('build', function() {
gulp.src('index.js').
pipe(browserify({
transform: ['reactify']
}))
.pipe(gulp.dest('build.js'))
})
gulp.task('connect', function() {
connect.server({
port: 3000,
livereload: true
})
})
gulp.task('html', function() {
gulp.src('*.html')
.pipe(connect.reload())
})
gulp.task('js',['build'], function() {
gulp.src('*.js')
.pipe(connect.reload())
})
gulp.task('watch', function() {
gulp.watch('*.html', ['html'])
gulp.watch('*.js', ['js'])
})
gulp.task('default', ['build', 'watch', 'connect'])
4、编写request请求
1、新增常量文件 constants.js 用来存放 request 请求中 Basic 认证的用户名 密码
module.exports={
uname:'123',
pwd:'123'
}
2、新增调用 API 文件 api.js
var request = require('superagent');
var constants = require('./constants.js');
module.exports = {
Get: function(callback) {
request
.get('http://localhost:53691/api/value')
.auth(constants.uname, constants.pwd)
.end(function(err, res) {
if(err){
alert(err);
}
callback(res.body);
});
}
}
5、新增index.js
var React=require('react'),
ReactDOM=require('react-dom'),
API=require('./Api.js');
var ItemList=React.createClass({
getInitialState:function(){
return {
Users:[]
}
},
componentWillMount:function(){
var users=API.Get(function(users){
this.setState({
Users: users
})
}.bind(this));
},
render:function(){
var users=this.state.Users;
if(Array.isArray(users)==false)throw new Error('users is not array')
var lists=users.map(function(item){
return <li key={item.ID}>{item.ID}:{item.Name}</li>
})
return (
<ul>
{lists}
</ul>
)
}
});
ReactDOM.render(<ItemList />,document.getElementById('app'))
6、新增index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>SuperAgent!</h1>
<div id="app"></div>
<script src="build.js/index.js"></script>
</body>
</html>
下载地址:
华为小程序发起网络请求
从零开始使用React全家桶开发电商系统 |
