关于fetch

有时百感交集，却又百口模辩，那些很远的事，仿佛就在昨天

fetch fetch fetch

fetch是一种XMLHttpRequest的一种替代方案,
在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax

下载: npm install whatwg-fetch --save || yarn add whatwg-fetch
引入: import {fetch as fetchPolyfill} from 'whatwg-fetch'
直接fetchPolyfill可以使用了
fetch的返回值是一个promise对象

componentDidMount(){
    //在componentDidMount请求数据
    fetchPolyfill第一个参数:请求的地址、第二个参数:配置项
    
    fetchPolyfill('/请求的地址',{
        method:"请求的方式",
        headers:{'Content-Type': 'application/json'},//请求头
        body:JSON.stringify({ }) //POST请求时需要放在body里并转为字符串
    }).then(()=>{
        res.json()
        //第一个.then的返回值是未处理的结果集
        //(需要自己解析是什么类型的)上方写的是json那么处理的就是json的结果集
    }).then((data)=>{
        console.log(data)
        //第二个.then的返回值才是调取的数据
    })
     
}
headers HTTP请求头问题:
credentials:默认为omit,忽略的意思，也就是不带cookie还有两个参数，
same-origin，意思就是同源请求带cookie；
include,表示无论跨域还是同源请求都会带cookie
headers:{credentials : include}

必须在header参数里面加上credentials: 'include'，
才会如xhr一样将当前cookies带到请求中去

fetch是不支持jsonp的如果需要用到jsonp安装fetch-jsonp
GET请求
componentDidMount(){
    let url = "portal-api/common/channel-info/7?inquirykey=&cityid=31&productId=&lantitude=&longitude="
    fetchPolyfill(url)//域名后面的全部地址
    //因为是get请求所以不需要配置直接.then
    .then(res=>res.json())
    .then(data=>{
      console.log(data);//接口中的数据全部在这里
    })
  }

POST请求
需要配置要重启
componentDidMount(){
    let url1 = "/api/product/guessWhatYouLikeV322";
    fetchPolyfill(url1, {
      method: "POST",
      headers:{'Content-Type': 'application/json'},
      body: JSON.stringify({//数据在接口的最下部请求方式最下部
        deviceid: "h5",
        extend: "/api/product/guessWhatYouLikeV322",
        lang: "zh",
        os: "h5",
        param: "{'pageIndex':1}",
"%7B%22pageindex%22%3A1%2C%22isc2clist%22%3A2%2C%22hometabid%22%3A%226039dcc26ae7401191239559335de9ff%22%7D"
上面长串解析后就是{'pageIndex':1}    
        sign: "f779683c8484959386bfef8effbf61de",
        version: "3.1.0"
      })
    })
      .then(res => res.json())
      .then(data => {
        console.log(data)
      })      
}

fetch与axios的区别

1、axios在第一个.then中就可以拿到数据，
   fetch在第二个拿，第一个是未处理的结果集
2、axios是一个基于Promise的一个http request的请求方式
        既能在服务端请求也能在客户端请求数据
        服务端: 根据Http进行数据请求
        客户端: 根据XMLHttpRequest进行数据请求
        判断客户是在服务端请求的还是客户端请求的?
           使用属性 Process (只有在服务端才会有node中才会有这个属性)
           这个属性不存在肯定是在客户端
           判断window如果有那肯定是客户端
   fetch不是用XMLHttpRequest进行数据请求的
       特点:符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
            脱离了XHR，是ES规范里新的实现方式
            fetch没有办法原生监测请求的进度，而XHR可以

猜你喜欢