React fetch请求方式

fetch请求

fetch是一个使用了Promise，封装程度更高的网络请求API

Promise 是异步编程的一种解决方案

Promise 对象代表一个异步操作,有三种状态:Pending(进行中) Resolved(已完成) Rejected(已失效)

Promise 实例生成以后,可以分别制定'完成' 和'失败'状态的回调函数,实现方式:链式调用方法

语法:

fetch(参数).then(完成的回调函数).catch(失败的回调函数)

fetch(url, options)	// url请求地址，options请求参数
	.then(response => {
	   //网络请求成功,执行该回调函数,得到响应对象,通过response可以获取请求的数据
	   //将Promise对象转换成json对象后return，给下一步的.then处理
	   return repsonse.json()
	   //或 return response.text()
	})
	.then(data => {
	  console.log(data)
	  //处理请求得到的数据
	})
	.catch(error => {
	  console.log(error)
	  //网络请求失败,执行该回到函数,得到错误信息
	})

实例：

postRequest = (url) =>  {
	let formData = new FormData();
	formData.append('username', 'admin');
	formData.append('password', '123456');
	
	let options = {
	  method: "POST", // 请求方式
	  body: formData,	 // 请求体
	  headers: {		 // 请求头
   　　  'Accept': 'application/json',
   　　  'Content-Type': 'application/json'
	  }
	}

	//fetch 请求
	fetch(url,opts)
	  .then((response) => {
	     return response.json()
	  })
	  .then((data) => {
	     console.log(data)
	  })
	  .catch((error) => {
	     console.log(error)
	  })
}

注意：默认的 window.fetch 受到跨域的限制无法直接使用，导入第三方的包 fetch-jsonp 来发送请求，他的用法和浏览器内置的 fetch 完全兼容

安装： npm install fetch-jsonp -S

引用 ：import fetchJsonp from 'fetch-jsonp';

code:

fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
  })