软件开发培训班 >> 编程开发 >> JavaScript


网络请求axios与fetch的区别及使用示例

一、axios和fetch的区别

Axios 和 Fetch 都是 JavaScript 中用于发送 HTTP 请求的 API，它们的主要区别在以下方面：

1.Axios 支持更广泛的浏览器和 Node.js 版本，而 Fetch 只能在较新的浏览器中使用，或需要使用 polyfill 兼容旧版浏览器 。

2.Axios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetch 目前不支持这些功能 。

3.Axios 默认返回 JSON 格式的数据，而 Fetch 返回的是 Response 对象，需要自己通过 Response 的方法（如 json()、text() 等）将结果转换成所需的格式 。

4.Axios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetch 的错误处理比较繁琐，需要手动检查 Response.ok 属性 。

5.fetch是原生js自带的，axios是封装的原生的xhr

二、axios与fetch的使用

axios的导入在上一篇文章

 //axios发送网络请求
        axios.get(`https://api.github.com/search/users?q=${KeyWord}`).then(
        	//成功的回调
            response => {
             	 console.log("请求成功了");
            },
            //失败的回调
            error => {
                 console.log("请求失败了");
            },
            
        )

fetch的使用：fetch不会直接返回数据，而是先返回是否联系到了服务器， 

发送网络请求------fetch
        fetch(`https://api.github.com/search/users?q=${KeyWord}`).then(
            response =>{
                console.log('联系服务器成功了');
                return response.json()
            },
            // error => {
            //     console.log('联系服务器失败了',error);
            //     //返回一个初始化状态的 Promise 中断 .then 链
            //     return new Promise(()=>{})
            // }
        ).then(
            response =>{
                console.log('获取数据成功了',response.items);
            },
            // error => {console.log('获取数据失败了',error);}

        ).catch(
            (error)=>{console.log(error);}
        )

总体来说，Axios 比 Fetch 更易用，功能更强大 。但如果只是在现代浏览器中做简单的请求操作，Fetch 也是一个不错的选择

附：fetch 和axios有哪些差异

fetch 和 axios 是两种不同的网络请求库，它们都可以用来向服务器发送 HTTP 请求 。但是它们之间有一些差异：

  • 兼容性：fetch 是由浏览器提供的一种原生方法，但是并不是所有浏览器都支持，所以在使用 fetch 的时候需要注意兼容性问题 。而 axios 是基于 XHR (XMLHttpRequest) 实现的，所以在使用 axios 的时候不用担心兼容性问题 。

  • 使用方式：fetch 的使用方式比较复杂，需要通过 promise 进行链式调用，而且 fetch 并不能发送 PUT、DELETE、PATCH 等请求，需要通过 options 参数进行配置 。axios 的

总结

到此这篇关于网络请求axios与fetch的区别及使用的文章就介绍到这了,更多相关网络请求axios与fetch区别内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！