前端开发最重要的部分之一是通过发出HTTP请求与后端通信，我们有几种方法可以在Javascript中异步调用API。几年前，大多数应用程序使用Ajax发送HTTP请求，Ajax代表异步Javascript和XML。但是现在，开发人员经常决定在.fetch()API和Axios之间做出选择。在本文中，我想比较这两种方法，并简要介绍基础知识和语法。除此之外，我还将比较两种情况下和错误处理中将数据转换为JSON格式的过程。我还将讨论HTTP拦截和下载进度。开始吧！Fetch概述和语法在构建Javascript项目时，我们可以使用window对象，它自带了很多很酷的方法可以在项目中使用。其中一个功能是FetchAPI，它提供了一个简单的全局.fetch()方法，这是一种从API异步获取数据的逻辑解决方案。让我们看一下.fetch()方法的语法。fetch(url).then((res)=>//handleresponse).catch((error)=>{//handleerror})在上面的示例中，您可以看到简单GET请求的语法。在.fetch()方法中，我们有一个强制参数url，它返回一个可以用Response对象解析的Promise。.fetch()方法的第二个参数是options，可选。如果我们不传递选项，则请求始终为GET，即从给定的URL下载内容。在options参数中，我们可以传递方法或头信息，所以如果我们想使用POST方法或其他方法，我们必须使用这个可选数组。正如我之前提到的，Promises返回Response对象，因此，我们需要使用另一种方法来获取响应的主体。有几种不同的方法可以使用，这取决于我们需要的格式：的例子。fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)});.then((response)=>response.json()).catch((error)=>console.log(error))在上面的代码示例中，您可以看到一个简单的POST请求，包括方法、标头和正文参数。然后我使用json()方法将响应转换为JSON格式。现在，让我们仔细看看axios。Axios概述和语法Axios是一个Javascript库，用于从Node.js或XMLHttpRequests或浏览器发出HTTP请求。作为现代图书馆，它基于PromiseAPI。axios有一些优势，比如防止XSRF或取消请求。为了能够使用axios库，我们必须安装它并将其导入到我们的项目中。可以使用CDN、npm或bower安装Axios。现在，让我们看一下简单GET方法的语法。axios.get(url).then(response=>console.log(response));.catch((error)=>console.log(error));在上面的代码中你可以看到我使用.get()方法创建了一个简单的GET请求。如果您想在函数中使用POST方法，则只需使用.post()方法并将请求数据作为参数传递。当我们创建一个配置对象时，我们可以定义一堆属性，最常见的是：baseUrlparamsheaderssauthresponseType作为响应，axios返回一个将使用响应对象或错误对象解析的承诺。在response对象中，有如下值：data，即实际的响应bodystatus，调用的HTTP状态，如200或404statusText，以文本消息形式返回的HTTP状态，如okheaders，服务器发回headersconfig，request配置request，XMLHttpRequest对象现在，让我们看一个带数据的POST方法的代码示例。axios.post({'/url',{name:'John',age:22},{options}})在上面的代码中，你可以看到post方法，我们把配置对象作为参数，其中有URL、数据和其他选项。我们也可以将配置对象定义为变量，然后将其传递给axios，如下例所示。constconfig={url:'http://api.com',method:'POST',header:{'Content-Type':'application/json'},data:{name:'John',age:22}}axios(配置);在这里，您可以看到所有参数，无论是URL、数据还是方法，都在配置对象中，因此在一个地方定义所有内容可能更容易。JSON如前所述，当我们使用.fetch()方法时，我们需要对响应数据使用某种方法，而当我们发送带有请求的主体时，我们需要将数据字符串化。在axios中，它是自动完成的，因此我们只需在请求中传递数据或从响应中获取数据即可。它会自动字符串化，因此不需要其他操作。让我们看看如何从fetch()和axios获取数据。//fetchfetch('url').then((response)=>response.json()).then((data)=>console.log(data)).catch((error)=>console.log(error))//axiosaxios.get('url').then((response)=>console.log(response)).catch((error)=>console.log(error))在上面的例子中，可以看到，对于axios我们没有额外的代码行，在.fetch()的情况下我们必须将数据转换为JSON格式。在一个更大的项目中，如果你创建了很多调用，使用axios会更舒服，避免重复代码。错误处理在这一点上，我们也需要给axios竖起大拇指，因为处理错误非常容易。如果有404之类的错误响应，promise会被拒绝并返回错误，所以我们需要捕获错误，我们可以检查它是什么类型的错误，仅此而已。让我们看一个代码示例。axios.get('url').then((response)=>console.log(response)).catch((error)=>{if(error.response){//当响应状态码超出2xx范围时console.log(error.response.data)console.log(error.response.status)console.log(error.response.headers)}elseif(error.request){//当发出请求后没有收到响应console.log(error.request)}else{//Errorconsole.log(error.message)}})在上面的代码中，当响应良好时，我返回数据，但如果请求以任何方式失败，我能够检查.catch()部分中的错误类型并返回正确的消息。对于.fetch()方法，它更复杂。每次我们从.fetch()方法获得响应时，我们都需要检查状态是否成功，因为即使不成功，我们也会得到响应。在.fetch()的情况下，承诺只有在请求没有被满足时才会被解决。让我们看一个代码示例。fetch('url').then((response)=>{if(!response.ok){throwError(response.statusText);}returnresponse.json()}).then((data)=>console.log(data)).catch((error)=>console.log(error))在此代码中，我检查了promise对象中代码的状态，如果响应的状态为ok，那么我可以处理并使用.json()方法，但如果没有，我必须在.then()中返回一个错误。为了方便和正确的错误处理，axios肯定会是您项目的更好解决方案，但是如果您正在构建一个只有一两个请求的小项目，使用.fetch()是可以的，但是您需要记住处理错误适当地。下载进度当我们需要下载大量数据时，跟踪进度的方法会很有用，尤其是在用户网速较慢的情况下。早期，为了实现进度指示器，开发人员使用了XMLHttpRequest.onprogress回调。在.fetch()和axios中，有不同的方法可以做到这一点。要在.fetch()中跟踪下载进度，我们可以使用response.body属性之一，一个ReadableStream对象。它逐块提供主体数据，并允许我们计算消耗了多少数据时间。在axios中，实现一个进度条也是可以的，而且更简单，因为有一个现成的模块，可以安装实现，叫做axiosProgressBar。如果你有大量的大数据要下载，你想跟踪进度条的进度，你可以用axios来管理，更简单快捷，但是.fetch()也提供了这种可能，只是需要更多的代码来开发同样的结果。HTTP拦截当我们需要检查或更改从应用程序到服务器的HTTP请求时，HTTP拦截可能很重要，或者以其他方式（例如，用于身份验证）。对于axios，HTTP拦截是该库的主要功能之一，这就是为什么我们不需要创建额外的代码来使用它。让我们看一个代码示例，看看我们可以多么容易地做到这一点。//请求拦截axios.interceptors.request.use((config)=>{console.log('Requestsent');})//响应拦截axios.interceptors.response.use((response)=>{//对响应返回响应})axios.get('url').then((response)=>console.log(response)).catch((error)=>console.log(error))在代码中执行操作，你可以看到请求拦截和响应拦截。在第一种情况下，我创建了一个console.log来告知正在发送的请求，在响应拦截中，我们可以对响应和返回执行任何操作。.fetch()默认不提供HTTP拦截。我们可以覆盖.fetch()方法来定义在发送请求期间需要发生的事情。当然，这需要更多的代码，并且可能比使用axios功能更复杂。总结在这篇文章中，我比较了两种创建HTTP请求的方法，从简单的概述开始，介绍了语法和一些重要的功能，如下载进度或错误处理。通过对比可以看出，Axios对于HTTP请求量大，需要很好的错误处理或者HTTP拦截的应用来说是一个更好的解决方案。对于只需要调用几个简单API的小项目，Fetch也是一个很好的解决方案。在为您的项目选择最佳解决方案时，还有一个非常重要的因素需要注意。大多数浏览器和Node.js环境都支持Axios，而现代浏览器仅支持Fetch，并且某些版本可能随旧版本一起提供。通过对这些知识的了解，希望大家能够选择最适合自己的解决方案，希望对大家有所帮助。感谢阅读?来源：https://medium.com作者：HarshPatel
