Web API 哪家强？Axios、Fetch 和 HttpClient 优选指南

夕阳_醉了2024-10-29 11:07

在现代 web 开发中，从 API 获取数据是一项常见任务。实现的方法也有不少，包括 Axios、原生 Fetch API 以及 Angular 的 HttpClient 库，等等。

今天，我们将探讨如何使用题目中的这些工具获取数据，本文不但列出了标准的应用程序代码，还给出了错误处理的示例。

一起来学习一下吧。

1. 数据获取

数据获取是 web 应用程序的关键部分，这是一个从服务器检索数据并集成到 app 的过程。

虽然我们有内置的 Fetch API，但别忘了还有诸如 Axios 这样的库，以及诸如 Angular 这样的框架，它们具有更直接的语法，可以为我们提供额外的功能。

了解的越多，涉猎的越广，开发人员才能在需要的时候，挑选出最适合特定需求的工具。

2. Fetch API

Fetch API 提供了一种在 JavaScript 中发出 HTTP 请求的原始方法。因为是内置于浏览器的，所以不需要其他库。

2.1 Fetch 基本用法

使用 Fetch 从 远程 API 获取数据的基本示例：

javascript 复制代码 
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2.2 使用 async/await 的 Fetch

使用async和await可以使代码更简洁、更具可读性哦：

javascript 复制代码 
// Function to fetch data using async/await
async function fetchData() {
  try {
    // Await the fetch response from the API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    // Check if the response is ok (status in the range 200-299)
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    
    // Await the JSON data from the response
    const data = await response.json();
    
    // Log the data to the console
    console.log(data);
  } catch (error) {
    // Handle any errors that occurred during the fetch
    console.error('Fetch error:', error);
  }
}

// Call the function to execute the fetch
fetchData();

2.3 Fetch 中的错误处理

Fetch 中的错误处理需要检查响应对象的ok属性。错误消息越具体，越能提供 HTTP 状态代码等其他详细信息，也越能更好地进行调试。

javascript 复制代码 
// Function to fetch data with explicit error handling
async function fetchWithErrorHandling() {
  try {
    // Await the fetch response from the API endpoint
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    // Check if the response was not successful
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    // Await the JSON data from the response
    const data = await response.json();
    
    // Log the data to the console
    console.log(data);
  } catch (error) {
    // Handle errors, including HTTP errors and network issues
    console.error('Fetch error:', error.message);
  }
}

// Call the function to execute the fetch
fetchWithErrorHandling();

3. Axios

这是一个用于发出 HTTP 请求的流行库。它之所以受欢迎是因为它不但简化了流程，而且比 Fetch API 提供了额外的功能。

3.1 安装 Axios

使用 Axios 之前，我们需要通过npm进行安装或通过 CDN 包含：

javascript 复制代码 
npm install axios

3.2 Axios 的基本用法

使用 Axios 获取数据的基本示例：

javascript 复制代码 
const axios = require('axios');

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3.3 使用 async/await 的 Axios

Axios 与async和await配合得相当有默契：

javascript 复制代码 
async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Axios error:', error);
  }
}

fetchData();

3.4 Axios 中的错误处理

Axios 提供了开箱即用的错误处理，赞：

javascript 复制代码 
async function fetchWithErrorHandling() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    if (error.response) {
      // Server responded with a status other than 2xx
      console.error('Error response:', error.response.status, error.response.data);
    } else if (error.request) {
      // No response was received
      console.error('Error request:', error.request);
    } else {
      // Something else caused the error
      console.error('Error message:', error.message);
    }
  }
}

fetchWithErrorHandling();

4. Angular HttpClient

Angular 提供内置的HttpClient模块，可以更轻松地在 Angular 应用程序中执行 HTTP 请求。

4.1 在 Angular 设置 HttpClient

首先我们需要导入HttpClientModule到 Angular 模块（通常是AppModule）。

javascript 复制代码 
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // Import HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4.2 HttpClient 基本用法

使用 HttpClient 获取数据的基本示例如下。注意，注入HttpClient的位置是在你想要组件或服务发出 HTTP 请求的地方。

javascript 复制代码 
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(
      (data) => {
        console.log(data); // Handle data
      },
      (error) => {
        console.error('Angular HTTP error:', error); // Handle error
      }
    );
  }
}

4.3 HttpClient 中的错误处理

Angular HttpClient 提供的错误处理方法更为结构化，更有条理性：

javascript 复制代码 
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { catchError, throwError } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  posts: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts')
      .pipe(
        catchError(error => {
          console.error('Error:', error); // Log the error to the console
          // Optionally, you can handle different error statuses here
          // For example, display user-friendly messages or redirect to an error page
          return throwError(() => new Error('Something went wrong; please try again later.'));
        })
      )
      .subscribe(
        data => {
          this.posts = data; // Handle successful data retrieval
        },
        error => {
          // Handle error in subscription if needed (e.g., display a message to the user)
          console.error('Subscription error:', error);
        }
      );
  }
}

5. 其他数据获取方法

除了 Fetch、Axios 和 Angular HttpClient 之外，我们再来介绍几个可以在 JavaScript 中获取数据的库和方法：

5.1 jQuery AJAX

jQuery 提供发出 HTTP 请求的ajax方法，但是呢，我们在现代应用程序中不大能见到它的身影：

javascript 复制代码 
$.ajax({
  url: 'https://jsonplaceholder.typicode.com/posts',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('jQuery AJAX error:', error);
  }
});

5.2 XMLHttpRequest 请求

也可以使用比较老的XMLHttpRequest，当然也比较啰嗦：

javascript 复制代码 
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('XMLHttpRequest error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('XMLHttpRequest error:', xhr.statusText);
};
xhr.send();

6. 总结

在 Fetch、Axios 和 Angular HttpClient 之间该如何选择取决于我们具体的项目要求：

  • Fetch API：JavaScript 原生，无其他依赖项，需手动错误处理。

  • Axios：语法更简单，内置错误处理，具有请求取消和拦截器等附加功能。

  • Angular HttpClient：集成 Angular，具有强大的 TypeScript 支持，结构化的错误处理。

总而言之，对于比较简单的项目，或者关键是最少化依赖项时，选择Fetch API 恰到好处。对于需要强大功能和更直观语法的大型项目，Axios 当仁不让。而如果是 Angular 应用程序，考虑到 HttpClient 的集成，以及其他特定于 Angular 的功能，使用 HttpClient 绝对一箭双雕。

只有了解了这些方法的区别，我们才能做出英明抉择，使用最佳工具来完成特定的数据获取任务。

相关推荐
爱吃奶酪的松鼠丶几秒前
net mvc中使用vue自定义组件遇到的坑
前端·vue.js·mvc
小威编程15 分钟前
uni-app应用级生命周期和页面级生命周期
前端·vue.js·uni-app
喝旺仔la26 分钟前
Django知识进阶
前端·html
CL_IN39 分钟前
高效集成：聚水潭奇门至金蝶云星空的数据流自动化
java·前端·自动化
Ylucius41 分钟前
14天速成前端 ------学习日志（已完结）------ 后端程序员学习了解前端
java·开发语言·前端·vue.js·学习·状态模式·1024程序员节
真是6的不行1 小时前
Hbuilder html5+沉浸式状态栏
前端·html·html5·hbuilder
熊的猫1 小时前
如何封装一个可取消的 HTTP 请求？
前端·javascript·vue.js·网络协议·http·webpack·node.js
超雄代码狂2 小时前
AJAX入门
前端·ajax
csdn小瓯2 小时前
前端八股文第一篇
前端·原型模式
风流野趣fly2 小时前
要做消息列表的颜色切换
前端
热门推荐
01前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04Windows10安装PCL1.14.0及点云配准05制冷毛细管的计算方法介绍06RAG 实践- Ollama+RagFlow 部署本地知识库07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Coze扣子平台完整体验和实践（附国内和国际版对比）09苍穹外卖面试总结10ECharts 地图实战分析：实现一个完整的地图下钻功能