react Fetch 请求 举个栗子

fetch 关注分离设计思想

import React, { Component } from 'react'

export default class Search extends Component {
    // 起步版
	search =  () => {
		const id = 1;
		fetch(`/api/search/getdata?id=${{id}`)
		.then(
			response =>{
				// 跟服务器联系上了 
				return response.json()
			},
			error => {
				// 我跟服务器玩不上了 
				return new Promise(()=>{})
				console.log(error)
			}
		)
		.then(
			response =>{
				// 成功的获取到了数据
				console.log(response)
			},
			error => {
				console.log(error)
			}
		)
	}
	// 优化版
	search = async  ()=> {
		try {
			const id = 1;
			const res = await fetch(`/api/search/getdata?id=${{id}`)
			const data = await res.json()
		} catch (erro) {
			conslose.log(erro)
		}
		
	}

	render() {
		return (
			<section className="jumbotron">
				<div>
					<button onClick={this.search}>搜索</button>
				</div>
			</section>
		)
	}
}