axios和fetch区别

fetch没有超时处理，

const controller = new AbortController();

const options = {
  method: "POST",
  signal: controller.signal,
  body: JSON.stringify({
    firstName: "David",
    lastName: "Pollock",
  }),
}
const promise = fetch("http://example.com/", options)
const timeoutId = setTimeout(() => controller.abort(), 4000);

Fetch提供的转化API有下面几种：

arrayBuffer()

blob()

json()

text()

formData()

1）fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
2）fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
4）fetch没有办法原生监测请求的进度，而XHR可以

fetch取消请求
function createRequestWithTimeout(timeout = 3000){
    return function(url,options){
        return new Promise((resolve,reject) => {
            const abort = new AbortController()
            options = options || {}
            if(options.signal){
                options.signal.addEventListener('abort',() => {
                    abort.abort()
                })
            }
            options.signal = abort.signal
            setTimeout(() => {
                reject(new Error('request timeout'))
                abort.abort()
            })
            fetch(url,options).then(resolve,reject)
        })
    }
}