为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Fetch / Axios入门：轻松掌握前端HTTP请求

Fetch / Axios入门：轻松掌握前端HTTP请求

标签：
JavaScript 前端工具 Vue.js
概述

本文介绍了Fetch和Axios入门知识，包括它们的基本概念和区别。文章详细讲解了如何使用Fetch和Axios进行HTTP请求，包括GET和POST请求的示例代码。此外，还提供了在实际项目中使用Fetch / Axios的技巧和调试方法。

Fetch和Axios简介

Fetch和Axios的基本概念

Fetch是现代浏览器内置的一个用于发送HTTP请求的API。它支持Promise，使得异步操作更加清晰易懂。Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用，它提供了许多封装好的功能，如拦截请求和响应、自动转换响应数据等。

Fetch和Axios的区别和联系

Fetch和Axios的主要区别在于它们的功能、性能和使用场景。Fetch是浏览器内置的API，而Axios是一个独立的模块，需要单独安装和引入。Axios提供了更多的功能，如支持浏览器和Node.js环境、自动处理JSON、支持请求拦截和响应拦截等。Fetch则更加轻量，它的语法更加简洁，功能更接近底层。

选择Fetch还是Axios的理由

选择Fetch还是Axios主要取决于具体的需求。如果项目中只需要发送简单的HTTP请求，且对响应的处理较为简单，那么可以选择Fetch。Fetch的语法简单，使用方便。而如果需要在项目中进行复杂的请求处理，如拦截请求、自动转换响应数据等，那么推荐使用Axios。

示例代码：Fetch的基本使用

// 发送GET请求
fetch('https://api.example.com/data')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
Fetch基础使用

Fetch的基本语法

Fetch的基本语法如下：

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

其中，url 是请求的URL地址，options 是可选配置对象，用于设置请求头、请求方法等。Fetch的返回值是一个Promise，该Promise在请求完成后会解析为一个Response对象。

发送GET请求和获取响应数据

发送GET请求并获取响应数据：

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

发送POST请求和处理响应

发送POST请求并处理响应数据：

const data = {
  key1: 'value1',
  key2: 'value2'
};

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });
Axios基础使用

Axios的基本安装和配置

Axios的基本安装和配置如下：

// 安装Axios
npm install axios

// 导入Axios
import axios from 'axios';

// 配置Axios
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;

发送GET请求和处理响应

发送GET请求并处理响应：

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

发送POST请求和处理响应数据

发送POST请求并处理响应数据：

axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Axios POST error:', error);
  });
Fetch和Axios的高级用法

使用Promise处理异步操作

Fetch和Axios都支持Promise，可以利用Promise链来处理异步操作。例如：

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

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

Promise帮助我们更好地处理异步操作，通过链式调用，我们可以轻松地处理复杂的异步流程，而不需要使用回调函数。

处理网络错误和超时

处理网络错误和超时：

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

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

设置请求头和请求体

设置请求头和请求体：

// Fetch
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  }),
})
  .then(response => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Network response was not ok');
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

// Axios
axios.post('https://api.example.com/data', {
  key1: 'value1',
  key2: 'value2'
}, {
  headers: {
    'Content-Type': 'application/json',
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Axios POST error:', error);
  });
实际应用场景

通过Fetch和Axios获取数据并展示

获取数据并展示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fetch/Axios 示例</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="data"></div>

<script>
axios.get('https://api.example.com/data')
  .then(response => {
    const data = response.data;
    document.getElementById('data').innerText = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Axios GET error:', error);
  });
</script>
</body>
</html>

使用Fetch和Axios实现表单提交

实现表单提交：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fetch/Axios 表单提交</title>
</head>
<body>
<form id="form">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>
  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', function(event) {
  event.preventDefault();

  const formData = new FormData(event.target);
  const data = {
    name: formData.get('name'),
    email: formData.get('email')
  };

  axios.post('https://api.example.com/data', data)
    .then(response => {
      console.log('提交成功:', response.data);
      // 清空表单
      event.target.reset();
    })
    .catch(error => {
      console.error('Axios POST error:', error);
    });
});
</script>
</body>
</html>

动态加载更多数据

动态加载更多数据：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fetch/Axios 动态加载数据</title>
</head>
<body>
<div id="data"></div>
<button id="loadMore">加载更多</button>

<script>
let page = 1;

function loadMoreData() {
  axios.get(`https://api.example.com/data?page=${page}`)
    .then(response => {
      const data = response.data;
      document.getElementById('data').innerHTML += JSON.stringify(data, null, 2);
      page++;
    })
    .catch(error => {
      console.error('Axios GET error:', error);
    });
}

document.getElementById('loadMore').addEventListener('click', loadMoreData);
</script>
</body>
</html>
Fetch和Axios的调试技巧

浏览器开发者工具的使用

浏览器开发者工具中的Network面板可以用于调试Fetch请求。打开Network面板，可以看到请求的详细信息，如请求头、响应头、请求体、响应体等。这对于调试Fetch请求非常有帮助。

断点调试Fetch和Axios请求

可以在JavaScript代码中设置断点来调试Fetch和Axios请求。例如，在处理响应的代码中设置断点，可以查看响应数据的具体内容。这有助于发现和解决请求中的问题。

捕获和处理异常

捕获和处理异常可以使用try-catch语句。在请求的Promise链中添加catch方法来捕获异常。例如：

// Fetch请求
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

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

通过捕获和处理异常，可以更好地控制程序的执行流程，并及时发现和解决错误。

更多异常处理场景

处理特定类型的错误，提供更详细的错误信息：

try {
  // Fetch请求
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error('Fetch error:', error);
  if (error instanceof TypeError) {
    console.error('Type error:', error);
  } else if (error instanceof SyntaxError) {
    console.error('Syntax error:', error);
  }
}
点击查看更多内容
发表于 2024.11.14 17:09， 共 48 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

UYOU

手记
篇
粉丝
86
获赞与收藏
459

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消