首页手记 Fetch / Axios入门：新手必读教程

Fetch / Axios入门：新手必读教程

标签：

JavaScript 前端工具

概述

本文详细介绍了Fetch / Axios入门的相关知识，包括两种技术的基本用法、配置选项和错误处理方式，帮助读者了解和掌握这两种发起异步网络请求的方法。

Fetch与Axios简介

什么是Fetch

Fetch API 是一种基于 Promise 的方法，用于从服务器获取数据。Fetch API 是一个现代的、可配置的、基于 Promise 的网络请求解决方案，用于发起异步请求。Fetch API 提供了一个简单的接口用于发起网络请求，并提供了统一的错误处理模型。

Fetch API 的基本用法如下：

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 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js。Axios 支持浏览器以及 node.js 的 XMLHttpRequest 和原生的 XMLHttpRequest。Axios 可以发送异步的 HTTP 请求，支持各种 HTTP 请求方法，如 GET、POST、PUT、DELETE 等。

Axios 的基本用法如下：

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

Fetch与Axios的区别

语法差异：
- Fetch API 使用 fetch() 函数发起请求，返回一个 Promise。
- Axios 使用 axios.get()、axios.post() 等方法发起请求，返回一个 Promise。
配置选项：
- Fetch API 的配置选项是通过第二个参数传递的。
- Axios 的配置选项是通过一个配置对象传递的。
兼容性：
- Fetch API 是基于 Promise 的，需要浏览器支持 Promise。
- Axios 可以在不支持 Promise 的环境中使用。
错误处理：
- Fetch API 的错误处理是通过检查 response.ok 来进行的。
- Axios 的错误处理是通过 Promise 的 catch 方法来处理的。

Fetch基础使用

Fetch的基本语法

Fetch API 的基本语法如下：

fetch(url, options)
  .then(response => {
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

url 是请求的 URL。
options 是可选的配置对象，包括方法、头信息、请求体等。

发送GET请求

发送 GET 请求时，不需要传递请求体，只需要传递 URL 和配置对象即可。

fetch('https://api.example.com/data', {
  method: 'GET'
})
  .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));

发送POST请求

发送 POST 请求时，需要传递请求体。请求体可以是 JSON、表单数据等形式。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
  .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));

发送PUT请求

发送 PUT 请求时，同样需要传递请求体，如下所示：

fetch('https://api.example.com/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
  .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));

发送DELETE请求

发送 DELETE 请求时，不需要传递请求体，只需传递 URL 和配置对象即可：

fetch('https://api.example.com/data', {
  method: 'DELETE'
})
  .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));

处理Promise

Fetch API 返回一个 Promise，该 Promise 会解析为一个 Response 对象。Response 对象是一个可读流，可以通过 json() 或 text() 等方法来获取其内容。

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

可以通过 npm 安装 Axios：

npm install axios

也可以通过 CDN 引入 Axios：

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios的基本语法

Axios 的基本语法如下：

axios(url, options)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

url 是请求的 URL。
options 是可选的配置对象，包括方法、头信息、请求体等。

发送GET请求

发送 GET 请求时，不需要传递请求体，只需要传递 URL 和配置对象即可。

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

发送POST请求

发送 POST 请求时，需要传递请求体。请求体可以是 JSON、表单数据等形式。

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送PUT请求

发送 PUT 请求时，需要传递请求体，如下所示：

axios.put('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发送DELETE请求

发送 DELETE 请求时，不需要传递请求体，只需传递 URL 和配置对象即可：

axios.delete('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

处理响应

Axios 返回一个 Promise，该 Promise 会解析为一个响应对象。响应对象包含响应头、状态码、响应体等信息。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.status); // 响应状态码
    console.log(response.headers); // 响应头信息
    console.log(response.data); // 响应体
  })
  .catch(error => {
    console.error(error);
  });

Fetch与Axios的配置选项

Fetch的配置选项

Fetch 的配置选项可以通过第二个参数传递，该参数是一个配置对象，可以包含以下属性：

method：请求方法（GET、POST 等）。
headers：请求头信息。
body：请求体，可以是 JSON、表单数据等形式。
mode：请求模式（cors、no-cors、same-origin）。
credentials：凭据模式（omit、same-origin、include）。
cache：缓存模式（default、no-store、reload）。
redirect：重定向模式（follow、error、manual）。
signal：取消请求的信号。
referrerPolicy：referrer 政策。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  }),
  mode: 'cors',
  credentials: 'include',
  cache: 'no-store',
  redirect: 'follow',
  referrerPolicy: 'no-referrer'
})
  .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 的配置选项可以通过配置对象传递，该对象可以包含以下属性：

url：请求的 URL。
method：请求方法（GET、POST 等）。
headers：请求头信息。
data：请求体，可以是 JSON、表单数据等形式。
params：URL 参数。
timeout：超时时间。
withCredentials：是否发送 Cookie 和认证信息。
responseType：响应类型（arraybuffer、blob、document、json、text）。
onUploadProgress：上传进度回调。
onDownloadProgress：下载进度回调。
validateStatus：自定义状态码验证函数。

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 10000,
  responseType: 'json',
  onUploadProgress: progressEvent => {
    console.log(`Upload progress: ${progressEvent.loaded / progressEvent.total * 100}%`);
  },
  onDownloadProgress: progressEvent => {
    console.log(`Download progress: ${progressEvent.loaded / progressEvent.total * 100}%`);
  },
  validateStatus: status => {
    return status >= 200 && status < 300;
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

错误处理

Fetch的错误处理

Fetch API 的错误处理是通过检查 response.ok 来进行的。如果 response.ok 为 false，则表示请求失败，可以通过 catch 方法处理错误。

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 的错误处理是通过 Promise 的 catch 方法来处理的。Axios 的错误对象包含 response、request 和 config 属性，可以通过这些属性来获取详细的错误信息。

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

实际案例

使用Fetch获取数据

以下是一个使用 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 获取数据的示例：

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

使用Fetch发送PUT请求

fetch('https://api.example.com/data', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe',
    age: 30
  })
})
  .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发送DELETE请求

axios.delete('https://api.example.com/data', {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

总结

通过以上内容的学习，我们已经了解了 Fetch 和 Axios 的基本使用方法、配置选项和错误处理方式。Fetch API 是基于 Promise 的，而 Axios 是一个基于 Promise 的 HTTP 库，它们都可以发起异步的网络请求，可以通过配置选项来定制请求的各种行为。希望本文能帮助你更好地理解和使用 Fetch 和 Axios。如果你需要进一步学习，可以参考慕课网上的相关课程。

点击查看更多内容

为 TA 点赞

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

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

跃然一笑

手记
篇

粉丝

40

获赞与收藏

164

关注作者，订阅最新文章

阅读免费教程

JavaScript 入门教程

80个小节 313923 2208

后端通用面试教程

41个小节 30980 346

网络编程入门教程

20个小节 12758 240

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Fetch / Axios入门：新手必读教程

阅读免费教程