react数据请求

fetch API

---

fetch是基于Promise设计，所以不支持Promise的浏览器建议使用cross_fetch库。

使用

• 第一个参数URL必须的。

• 第二个参数：请求信息。。

• then里面是返回信息

• catch捕获错误

如果是GET请求，参数直接拼接在URL上，如果是POST请求，放在请求信息中的body上。

fetch(this.props.url,{
    method: "POST",
    body: JSON.stringify(this.state),
    headers: {
         'content-type': 'application/json'
    }
})
.then((res)=>{
    return res.json(); //请求成功，获请求元数据
})
.then((result)=>{
    console.log(result); // 拿到数据进行页面渲染
})
.catch((err)=>{
    //出错了
})

在第一步里会获取以下格式数据，然后取自己需要的信息进行后续操作。

请求元数据.png

支持的请求参数

fetch(url, {
    body: JSON.stringify(data), // 请求的body信息，POST才有
    cache: 'no-cache', // 请求的cache模式
    credentials: 'include', //发送cookie，默认不会发送。 
    headers: { //请求头信息，Headers对象或者字面量
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // 请求方法 GET POST
    mode: 'cors', // 请求模式：no-cors, cors, *same-origin
    redirect: 'follow', // 是否重定向 manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json())

Headers

请求头部分可以是对象字面量，当然也可以是Headers对象。

let myHeaders = new Headers();
myHeaders.append("Content-Type", "text/plain");
fetch(this.props.url,{
    method: "POST",
    body: JSON.stringify(this.state),
    headers: myHeaders,
})

fetch发起post请求

用fetch实现一个post请求，提交数据。请求地址有父组件传递，要提交的数据为state值，这里需要把对象转成字符串。还需要添加headers声明数据类型。否则有可能返回415，类型不对。

submitHandle(e){
      e.preventDefault();
      fetch(this.props.url,{
          method: "POST",
          body: JSON.stringify(this.state),
          headers: {
              'content-type': 'application/json'
          }
      }).then(
          (data)=>{
              console.log(data);
          }
      )
      .catch(()=>{
          //错误
      })
}

data.png