亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

初學者指南：輕松掌握 Fetch / Axios 的使用方法

概述

本文详细介绍了Fetch和Axios这两种流行的HTTP请求库的使用方法和区别，包括它们的基本操作、错误处理机制以及一些高级用法。Fetch API由浏览器内置支持，而Axios则需要独立安装，提供更多功能和更好的兼容性。文章还提供了多个示例代码，展示了如何使用Fetch和Axios发送GET和POST请求，并处理响应数据。

引入 Fetch 和 Axios

Fetch API 是浏览器内置的一个接口，它提供了一个更简单的方式来发起异步 HTTP 请求。Fetch API 不仅可以用于处理网络请求，还可以方便地处理响应数据。Fetch API 提供了一个 promise 基础的接口，因此可以使用 async/await 等现代 JavaScript 特性来处理异步操作。

Axios 是一个基于 promise 的 HTTP 库，可以在浏览器和 Node.js 中使用。与 Fetch 不同的是，Axios 是一个独立的库，需要通过 npm 或其他方式安装。Axios 提供了更多的功能和更好的错误处理机制，因此在实际项目中更常见。

两者的区别与联系
  • 浏览器支持: Fetch API 由浏览器内置支持，而 Axios 需要从 npm 或其他地方下载安装。
  • 错误处理: Fetch API 的错误处理不如 Axios 简单直接，Axios 提供了更丰富的错误类型和处理机制。
  • 额外功能: Axios 提供了更多的功能，如拦截请求和响应、自动转换 JSON 等，而 Fetch API 则没有这些功能。
  • 兼容性: Axios 更适用于各种浏览器和 Node.js 环境，而 Fetch API 需要确保浏览器支持。

示例代码

// Fetch 示例
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

// Axios 示例
axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));
安装 Axios

如何使用 npm 安装 Axios

Axios 可以通过 npm 进行安装。在命令行中运行以下命令：

npm install axios

安装完成后，Axios 就可以通过 import 或 require 语句引入到项目中。

如何在项目中引入 Axios

在项目中使用 Axios 时，可以通过 ES6 模块导入或 CommonJS 方式导入。以下是一个基本的导入示例：

// ES6 模块导入
import axios from 'axios';

// CommonJS 导入
const axios = require('axios');
基本的 Fetch 操作

发送 GET 请求

发送 GET 请求是最基本的 Fetch 操作。你只需要提供请求的 URL，并调用 fetch 函数。Fetch API 返回一个 promise，可以链式调用来处理响应。

示例代码

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

在这个示例中，fetch 函数发送一个 GET 请求到指定的 URL，response 是一个包含响应信息的对象。通过 response.json() 方法将响应体解析为 JSON 格式，然后我们可以处理这个 JSON 数据。

处理错误

如果请求失败，fetch 返回的 promise 会拒绝，并将错误信息传给 .catch 方法。

发送 POST 请求

发送 POST 请求需要构造一个包含请求体的对象，并将这个对象作为第二个参数传递给 fetch 函数。POST 请求通常用于提交数据到服务器。

示例代码

const postData = {
    name: 'John Doe',
    age: 30
};

fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData)
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

在这个示例中，我们定义了一个 postData 对象，包含要发送的数据。通过设置 Content-Type 为 application/json，并使用 JSON.stringify(postData) 将数据转换为 JSON 格式。fetch 函数会将这些信息发送到服务器，并等待响应。

使用 async/await

Fetch API 支持 async/await 语法，可以更简洁地处理异步操作。

async function postData() {
    const response = await fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(postData)
    });
    const data = await response.json();
    console.log(data);
}

postData().catch(error => console.error('Error:', error));
基本的 Axios 操作

发送 GET 请求

发送 GET 请求最为简单，只需要提供 URL 即可。

示例代码

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

在这个示例中，axios.get 发送一个 GET 请求到指定的 URL，返回一个 Promise。当请求成功时，response.data 包含服务器返回的数据。如果请求失败，catch 方法会捕获错误信息。

发送 POST 请求

发送 POST 请求需要设置请求方法为 POST，并传递请求体数据。

示例代码

const postData = {
    name: 'John Doe',
    age: 30
};

axios.post('https://api.example.com/data', postData)
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));

在这个示例中，axios.post 发送一个 POST 请求到指定的 URL，并传递 postData 对象作为请求体。response.data 包含服务器返回的数据。

使用 async/await

Axios 也支持 async/await 语法，可以更简洁地处理异步操作。

async function postData() {
    try {
        const response = await axios.post('https://api.example.com/data', postData);
        console.log(response.data);
    } catch (error) {
        console.error('Error:', error);
    }
}

postData();
处理响应数据

JSON 数据的响应处理

Fetch API 和 Axios 都提供了方便的方法来处理 JSON 格式的响应数据。

Fetch 示例

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Axios 示例

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

上述示例中，response.json() 和 response.data 分别将响应体解析为 JSON 格式。

错误处理

Fetch API 和 Axios 都提供了错误处理机制，可以捕获请求失败时抛出的错误。

Fetch 示例

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

Axios 示例

axios.get('https://api.example.com/data')
    .then(response => console.log(response.data))
    .catch(error => {
        if (axios.isAxiosError(error)) {
            console.error('Axios error message:', error.message);
        } else {
            console.error('Error:', error);
        }
    });

在 Axios 中，axios.isAxiosError 用于判断错误是否由 Axios 抛出，有助于更细粒度地处理不同类型的错误。

高级用法

设置请求头

设置请求头可以在请求中传递额外的头部信息，如设置 Content-Type 或 Authorization。

示例代码

// Fetch 示例
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_token'
    },
    body: JSON.stringify(postData)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

// Axios 示例
axios.post('https://api.example.com/data', postData, {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_token'
    }
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

使用配置对象进行更复杂的请求

Fetch API 和 Axios 都支持通过配置对象来构建更复杂的请求，如设置超时时间、取消请求等。

示例代码

// Fetch 示例
fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(postData),
    timeout: 5000 // 设置超时时间
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

// Axios 示例
axios.post('https://api.example.com/data', postData, {
    headers: {
        'Content-Type': 'application/json'
    },
    timeout: 5000 // 设置超时时间
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

取消请求

Axios 提供了取消请求的功能，可以使用 CancelToken 来取消请求。

const CancelToken = axios.CancelToken;
const cancel = axios.CancelToken.source();

axios.post('https://api.example.com/data', postData, {
    cancelToken: cancel.token
})
.then(response => console.log(response.data))
.catch(error => {
    if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
    } else {
        console.error('Error:', error);
    }
});

setTimeout(() => {
    cancel.cancel('Operation canceled by the user.');
}, 1000);

发送带参数的请求

在发送 GET 请求时，通常需要传递查询参数来过滤数据。可以使用 URL 参数或配置对象来实现。

示例代码

// Fetch 示例
const params = new URLSearchParams({
    name: 'John Doe',
    age: 30
});

fetch(`https://api.example.com/data?${params.toString()}`)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

// Axios 示例
const params = {
    name: 'John Doe',
    age: 30
};

axios.get('https://api.example.com/data', {
    params
})
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

在上述示例中，URLSearchParams 用于构建查询参数，而 Axios 的 params 选项直接传递对象。

实践示例

假设我们有一个简单的 API，用于获取用户信息和发送用户数据。

获取用户信息

axios.get('https://api.example.com/users/1')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

发送用户数据

const userData = {
    name: 'John Doe',
    age: 30,
    email: '[email protected]'
};

axios.post('https://api.example.com/users', userData)
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));

这些示例展示了如何使用 Fetch 和 Axios 发送简单的 GET 和 POST 请求，并处理响应数据。通过这些基础示例，你可以开始使用 Fetch 和 Axios 处理更复杂的 HTTP 请求。

點擊查看更多內容
為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習，寫下你的評論
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消