react中通过fetch()函数来请求地址获取数据

责编:menVScode 2017-07-04 23:05 阅读(553)

        传统请求url获取数据通常用的是ajax方式,在react中,大多使用fetch方法来实现ajax请求数据。fetch()方法用于发起获取资源的请求。他返回一个promise,这个promise会在请求响应后被resolve,并传回Response对象。

        优化比原生ajax更好。


fetch() 函数的基本格式

        fetch(input,init).then(function(response){ ... });

参数

        input:定义要获取的资源,这可能是:

                一个USVString 字符串,包含要获取资源的URL。

                一个Request对象,Request对象穿件方式:Request。Request();

        init:可选

                一个配置项(自定义配置)对象,包括所有对请求的设置。可选的参数有:

                        method:请求的方法,如GET、POST。

                        headers:请求的头信息,形式为Headers对象或者ByteString。

                        body:请求的body信息:可能是一个Blob、BufferSource、FormDate、URLSearchParams或者USVString对象。注意GET或HEAD方法

                        mode:请求的模式,如cors、no-cors或者same-origin。

                        credentials:请求的credentials,如omit、same-origin或者include。

                        cache:请求的cache模式:default,no-store、reload、no-cache、only-if-cached。

        返回值:一个Promise,resolve时回传Requese对象。

用法示例

        fetch(input)

        .then( (response) => response.json() )

        .then( (response) => {具体的设置或者是要改变的属性以及值} )

        .catch( (err) => {加载数据出错执行函数} )


案例

import React from 'React';

class Demo extends React.Component{
	state = {
		page:1,
		maxResult:5,
		data:null
	}
	getDate(){
		let URL=`https://route.showapi.com/341-2?maxResult=${this.state.maxResult}&page=${this.state.page}&showapi_appid=41679&showapi_sign=ae783ee0411c4f5cba54099b77c61363`;
		let _this = this;
		fetch(URL)
		.then( (response)=>response.json() )
		.then( (data)=>{
			//console.log(data.showapi_res_body)
			_this.setState({
				data:data.showapi_res_body
			})
		} )
		.catch( (err)=>console.log(err) )
	}
	doClick=()=>{
		this.setState({
			page:this.state.page+1
		})
		this.getDate()
	}
	render(){
		let newDate = [];

		if(this.state.data){
			let dateArr = this.state.data.contentlist;
			for(var i=0; i<dateArr.length; i++){
				let value = <dl key={i}>
						<dt>{dateArr[i].title}</dt>
						<dd><img src={dateArr[i].img} /></dd>
						<dd>{dateArr[i].ct}</dd>
					    </dl>
	                       newDate.push(value)
	            }
		}
		//console.log(newDate)
		return(
			<div>
				<button onClick={this.doClick}>按钮</button>
				<div>
					{newDate}
				</div>
			</div>
		)
	}
	componentDidMount(){
		this.getDate()
	}
}
export default Demo
import React from 'react';
import ReactDOM from 'react-dom';
import Fetch from './components/Fetch';

ReactDOM.render(
	<div>
		<Fetch />
	</div>, document.getElementById('app'));
标签: fetch react
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码