fetch的使用--当无法判断后台返回数据为什么类型时如何操作

佚名 6年前 (2019-05-07) 随笔 783人围观抢沙发百度已收录

需求：一个增删改查页面，当新增，删除或者修改操作时不确定后台会返回的信息（会根据需求不同请求成功后可能返回message，可能什么都不返回）

问题：使用fetch进行请求时， Fetch API 的 Response 接口呈现了对一次请求的响应数据，response解析数据的方法我用到的为response.json()和response.text()，因为response可以获取到状态码，请求状态，但是在解析之前是不清楚返回到结果用哪种方式解析的，如果后台返回的为空还用json的方式就会报错 "Unexpected end of JSON input"

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

解决：

在fetch请求后使用了三个then去处理各种状态的返回值：

　　1）第一个then判断是否请求成功，失败则直接返回错误信息

　　2）成功则在第二个then中判断mothed类型，若为增删改状态则返回response.text()，其他类型返回response.json()

　　3）第三个then接收第二个then的返回值，若mothed类型为增删改则判断后台是否返回了message，返回则进行解析并渲染出返回值，若无返回值则不进行操作，其他类型则直接返回第二个then中的返回值


const checkStatus = response => {
　//当请求成功时直接返回response，失败则进行json解析返回失败信息
  if (response.status == 200) {
    return response
  }else{
    return response.json().then(json => {
      return Promise.reject(json)
    })
  }
};

export default function basicRequest(url, option) { 　　const options = { 　　expirys: isAntdPro(), 　　　　...option, 　　}; 　　const fingerprint = url + (options.body ? JSON.stringify(options.body) : ''); 　　const hashcode = hash 　　　　.sha256() 　　　　.update(fingerprint) 　　　　.digest('hex');
　　const defaultOptions = { 　　　　credentials: 'include', 　　}; 　　const newOptions = { ...defaultOptions, ...options };
　　if ( 　　　　newOptions.method === 'POST' || 　　　　newOptions.method === 'PUT' || 　　　　newOptions.method === 'DELETE' || 　　　　newOptions.method === 'PATCH' 　　) { 　　　　if (!(newOptions.body instanceof FormData)) { 　　　　　　newOptions.headers = { 　　　　　　　　Accept: 'application/json', 　　　　　　　　'Content-Type': 'application/json; charset=utf-8', 　　　　　　　　...newOptions.headers, 　　　　　　}; 　　　　　　newOptions.body = JSON.stringify(newOptions.body); 　　　　} else { 　　　　　　newOptions.headers = { 　　　　　　　　Accept: 'application/json', 　　　　　　　　...newOptions.headers, 　　　　　　}; 　　　　} 　　}
　　const expirys = options.expirys && 60; 　　if (options.expirys !== false) { 　　　　const cached = sessionStorage.getItem(hashcode); 　　　　const whenCached = sessionStorage.getItem(`${hashcode}:timestamp`); 　　　　if (cached !== null && whenCached !== null) { 　　　　　　const age = (Date.now() - whenCached) / 1000; 　　　　　　if (age < expirys) { 　　　　　　　　const response = new Response(new Blob([cached])); 　　　　　　　　return response.json(); 　　　　　　} 　　　　　　sessionStorage.removeItem(hashcode); 　　　　　　sessionStorage.removeItem(`${hashcode}:timestamp`); 　　　　} 　　}

return fetch(url, newOptions)
    .then(checkStatus)
    .then(response => {
　　　　//请求成功状态下，method正常情况使用response.json()将结果返回，当进行增删改时使用response.text(),在返回值为空或者有返回值是text（）都不会报错
      if (newOptions.method === 'DELETE'||
          newOptions.method === 'POST'|| 
          newOptions.method === 'PATCH'||
          newOptions.method === 'PUT') {
        return response.text();
      }
      return response.json();
    }).then(e=>{
　　　　//获取上一步返回的值，当method非增删改状态直接返回值，反之判断返回值是否存在，若存在解析一下弹出信息，若不存在不做操作
      if (newOptions.method === 'DELETE'||
          newOptions.method === 'POST'|| 
          newOptions.method === 'PATCH'||
          newOptions.method === 'PUT') {
            if(e){
              const msg = JSON.parse(e)
              if(msg.message){
                notification.success({
                  message: msg.message
                })
              }
            }
      }
      return e
    })
    .catch(e => {//获取错误信息并弹出
      notification.error({
        message: e.message
      })
    })
}