基于fetchAPI封装newFetch方法，实现请求超时/错误

• 阻断请求方法
  1. AbortController 控制器，可以阻断web请求

       // IE不支持
      const controller = new AbortController()
       // AbortController.signal属性获取其关联 AbortSignal对象的引用
      const signal = controller.signal
      controller.abort()
     

  2.兼容ie的XMLHttpRequest.abort()
• Promise.race([])
  • 同时发送多个请求，返回最先请求到的结果
  • 问题： 当我们重传的时候，如果不终止上一次请求。上次请求依然执行
• 代码

  let newFetch = (url) => {
          // 重传次数控制
          let requestAgain = 0
          // 创建控制器对象
          const controller = new AbortController()
          // AbortController.signal属性获取其关联 AbortSignal对象的引用
          const signal = controller.signal
          //判断是否为IE 该判断不支持IE11 以上
          if (navigator.userAgent.indexOf('MSIE') > -1) {
              // 如果是ie 不支持-- AbortController--
              // 也不支持fetch
              // 此时使用原生xmlHttpRequest
              // ie5/6和ie6+创建xmlHttpRequest对象有所不同
              return new Promise((resolve, reject) => {
                  xmlreq(url, 'GET', resolve)
              }).then((res) => {
                  // console.log('success')
                  // console.log(res)
              }).catch(err => {
                  // 重新发送请求一次
                  if (requestAgain != 0) return
                  requestAgain++
                  xmlreq(url, 'GET', resolve)
              })
          } else {
              // 不是ie
              return Promise.race([requestPromise(url, signal).then(async (res) => {
                  let result = await res.json()
                  // console.log(result)
              }).catch((err) => {
                  // 错误时重发
                  // 使用控制器终止请求
                  controller.abort()
                  // 重新发送请求
                  requestPromise(url).then(async (res) => {
                      let result = await res.json()
                      // console.log('请求重发')
                      // console.log(result)
                  })
              }), new Promise((resolve, reject) => {
                  setTimeout(() => {
                      // 使用控制器终止请求
                      controller.abort()
                      // 重新发送请求一次
                      if (requestAgain != 0) return
                      requestAgain++
                      requestPromise(url).then(async (res) => {
                          let result = await res.json()
                          // console.log('请求重发')
                          // console.log(result)
                      })
                  }, 30000);
              })])
          }

      }
      // 封装fetch 请求
      let requestPromise = (url, signal = {}) => {
          return fetch(url, {
              signal,
              headers: {
                  "Content-Type": 'application/json;charset=utf-8;'
              }
          })
      }
      // 封装xmlHTTPRequest
      let xmlreq = (url, methods = 'GET', resolve) => {
          // 创建xmlHttpRequest 对象
          let xmlHttpReq
          if (window.XMLHttpRequest) {
              // ie6+
              xmlHttpReq = new XMLHttpRequest();

          } else {
              // ie5/6
              xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP")
          }
          // 设置超时时间
          xmlHttpReq.timeout = 30000
          xmlHttpReq.open('GET', url)
          xmlHttpReq.send()
          xmlHttpReq.ontimeout = (event) => {
              // 终止上一次请求
              xmlHttpReq.abort()
              // 重新发送请求
              xmlHttpReq.send()
          }
          xmlHttpReq.onreadystatechange = function (event) {
              if (event.target.readyState == 4 && event.target.status == 200) {
                  let resData = JSON.parse(xmlHttpReq.response)
                  resolve(resData)
              }
          }
      }
      newFetch('http://a.com')

• 个人理解 写的不对的地方希望大家指出，谢谢。