React中怎么实现后台调用（异步+同步）

本是古典何须时尚 2021-09-24 10:38 867阅读 0赞

### React如何调用后台 ###

*   *  fetch
     *  如何同步调用
     *  真实案例

> 使用惯了jQuery封装好的ajax方法，这次在使用React项目开发时，着实令人着急，记录一下。

## fetch ##

> fetch是用来取代传统的XMLHttpRequest的。 它的优点很多，包括链式调用的语法、返回promise等。

下面就是最基本的fetch使用，默认是异步的。

fetch(url,{ 
    	method: 'POST',
    	headers: { 
    	    'Content-Type': 'application/json',
    	},
    	body: data,					// data为传输对象
    }).then(res => { 
        res.json().then(data => { 	// data为返回的对象
    		console.log(data);
    	});
    }).catch(function(e) { 
      	console.log("ERROR");
    });

简洁版：

## 如何同步调用 ##

> 使用 async 和 await 关键词，不过听说对浏览器兼容性不好。

// 在方法前加上async关键词
    async function fetchAsync () { 
      let response = await fetch(url);
      let data = await response.json();
      return data;
    }

## 真实案例 ##

getData=(id)=>{ 
    	let option = { };		// 参数
    	options.method = 'post';
    	let data={ id:id};
    	options.body = JSON.stringify(data);
    	options.headers={ 
    	    'Content-Type':'application/json'
    	};
    	fetch(baseUrl+"/xx/xxxx",option)
    		.then(res=> res.json())
    		.then(res=> { 
    			if(res.status===200){ 
    				// 获取返回值，修改state
    				this.setState({ 
    					data:res.data.list
    				});
    			}
    		})
    		.catch(e => console.log("error", e));
    }