http通信 axios VS fetch

基本用法

GET

两者都是基于Promise,所以可以使用.then 也可以使用async await。

fetch需要手动对相应内容进行转换,axios会根据响应头类型,进行自动转换。所以axios的代码更加简洁。

javascript 复制代码
      axios.get("http://localhost:8000/api/...").then((res) => {
        console.log(res.data);
      });

      const res = await axios.get("http://localhost:8000/api/...");
      console.log(res.data)


      fetch("http://localhost:8000/api/...")
        .then((res)=>res.text())
        .then(console.log)

      const res = await fetch("http://localhost:8000/api/...");
      const data = await res.text();
      console.log(data)

POST(json+header)

axios的post会自动设置请求的content-type,fetch需要手动设置。除此之外,fetch的json参数需要序列化为字符串。

javascript 复制代码
    const params = {
        name:"zhangsan"
    };
    const headers = {
        "token":"..."
    };
    axios.post(url,params,{headers})


    const params = {
        name:"zhangsan"
    };
    const headers = {
        "token":"...",
        "Content-Type":"application/json"
    };
    fetch(url,{
        method:"POST",
        body:JSON.stringify(params),
        headers
    })

POST(formdata)

对于表单请求,两者都能通过formdata参数指定content-type。

axios提供了直接用于表单请求的方法,可以直接将表单的文件内容作为参数,在某些场景下更方便一些。

javascript 复制代码
    const form = new FormData();
    form.append("name","zhangsan");
    form.append("file",file);
    axios.post(url,form)

    axios.postForm(url,{
        name:"zhangsan",
        _file:file
    })



    const form = new FormData();
    form.append("name","zhangsan");
    form.append("file",file);

    fetch(url,{
        method:"POST",
        body:form
    })

数据流

axios在浏览器环境,并不支持string类型,所以并不能直接处理数据流。如果请求二进制数据,只能通过所有的内容传输完成后,在处理。

fetch可以通过res的body属性实现数据流的处理。

javascript 复制代码
    axios.get(url,{
        responseType:"arraybuffer"
    })
    .then((res)=>{
        // 传输完成后处理res.data
    })


    fetch(url).then((res)=>{
        const reader = res.body.getReader();
    })

中止请求

axios和fetch都可以通过abort方法来中断请求。

javascript 复制代码
    const controller = new AbortController();
    axios.get(url,{
        signal:controllerq.signal
    })

    controller.abort();

    fetch(url,{
        signal:controller.signal
    })  

    controller.abort();

请求超时

axios可以设置超时参数,fetch可以通过abortSignal方法来设置超时,不过这个方法比较新,一些老的浏览器可能不兼容,可以通过abortControl来处理。

javascript 复制代码
    axios.get(url,{
        timeout:5000
    })
    .catch((err)=>{
        if(err.code === "ECONNABORTED"){
            // 超时处理
        }
    })

    fetch(url,{
        signal: AbortSignal.timeout(5000)
    })
    .catch((err)=>{
        if(err.name === "TimeoutError"){
            // 超时处理
        }
    })

进度监控

axios提供了上传/下载进度回调。

fetch没有直接提供进度的回调,可以通过数据流的形式,获取单体下载的进度。对于上传文件,fetch还没办法获取进度。

javascript 复制代码
    axios.post(url,formData,{
        onUploadProgress:(e)=>{
            const percent = Math.round((e.loaded * 100) / e.total);
            console.log(`上传进度:${percent}%`)
        }
    })
    axios.get(url,{
        responseType:"arraybuffer",    
        onDownloadProgress:(e)=>{
            const percent = Math.round((e.loaded * 100) / e.total);
            console.log(`下载进度:${percent}%`)
        }
    })

    const response = await fetch(url);
    const reader = response.body.getReader();
    const total = +response.headers.get("Content-Length");
    let received = 0;   
    while(true){
        const {done,value} = await reader.read();
        if(done){
            break;
        }
        received += value.length;
        console.log(`下载进度:${Math.round((received * 100) / total)}%`)
    }

兼容性

axios支持所有的主流浏览器

基于XMLHttpRequest,向后兼容表现更好。

非浏览器自带,需要安装,占用一些体积,体积敏感需要考虑。
fetch支持所有主流浏览器

相对较新的接口,一些老版本浏览器和IE浏览器可能不支持,虽然可以通过第三方库兼容,但是会失去部分特性。

浏览器自带功能,无需安装,不占体积。

总结

axios和fetch都是好用的http通信方式,绝大部分情况下,axios和fetch都可以满足,只有少数情况下,比如说

相应数据流处理,axios无法满足,需要使用fetch

上传进度监控,fetch无法满足,需要使用axios或者XMLHttpRequest

axios和fetch并不是非要二选一,实际开发中应该根据情况灵活选择,综合运用。

相关推荐
明月看潮生15 分钟前
青少年编程与数学 02-003 Go语言网络编程 15课题、Go语言URL编程
开发语言·网络·青少年编程·golang·编程与数学
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
‍。。。1 小时前
使用Rust实现http/https正向代理
http·https·rust
龙哥说跨境1 小时前
如何利用指纹浏览器爬虫绕过Cloudflare的防护?
服务器·网络·python·网络爬虫
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
懒大王就是我1 小时前
C语言网络编程 -- TCP/iP协议
c语言·网络·tcp/ip