后端小白程序员的axios学习笔记

最新推荐文章于 2023-06-01 16:03:33 发布

5akura

最新推荐文章于 2023-06-01 16:03:33 发布

阅读量1.1k

点赞数

分类专栏：个人学习笔记box 文章标签： vue javascript js html5

本文链接：https://blog.csdn.net/weixin_43873227/article/details/118058836

版权

本文是一篇关于axios的学习笔记，适合后端小白程序员。内容涵盖axios的基本概念、安装使用、API介绍、请求配置、响应结构、错误处理、取消请求以及在Vue中的应用。文章介绍了json-server作为模拟服务器的使用，以及axios与Promise的结合，同时讨论了axios在Vue项目中的集成和配置。

摘要由CSDN通过智能技术生成

axios

写在前面

本博文仅作为个人学习过程的记录，可能存在诸多错误，希望各位看官不吝赐教，支持错误所在，帮助小白成长！

一、入门了解

1.1、什么是axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

简单来说，就是我们可以借助axios发送一些http请求，例如我们最熟悉的GET、POST请求，再例如我们学习过的Ajax异步请求。那么说到这里，你肯定会想起JQuery，因为我们目前在前端页面中都还是使用JQuery的库向服务器发送请求。

1.2、为什么学习axios?

随着前端框架Vue、React的出现，催生了axios这种轻量级的库，我们不必再使用庞大而复杂JQuery库来完成请求发送的操作。并且axios的功能更强大，并且支持Promise API。目前主流的前端框架（Vue、React）都极力推荐axios，并且对其做了积极的整合。

axios特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

axios中文网|axios API 中文文档 | axios (axios-js.com)

1.3、前置内容与环境准备

在学习axios时，我们默认已经了解并学习了以下知识：

Promise
AJAX

1.3.1、json-server安装使用

既然是发送Http请求，那么我们就必须要有一个接收响应我们请求的服务端。这里推荐使用json-server
github仓库地址：typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously) (github.com)

0配置在30秒内创建一个虚假的REST API （REST是什么，学过后端的应该都懂，这里略过），直接开搞！

首先需要有node环境，然后创建项目文件夹后，在Terminal中打开文件夹，执行npm init进行项目初始化！
下载json-server到项目本地lib（你也可以选择全局安装）
```
npm install --save-dev json-server
```

在项目根目录下创建db.json（这就相当于我们的数据库，请求的响应的数据都从这里面获取）,可以按需修改，这是官网给的默认数据格式：

{
     
  "posts": [
    {
      "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    {
      "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": {
      "name": "typicode" }
}

在package.json中加上服务启动脚本
```
 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "server": "json-server --watch db.json"
 },
```
如果是全局安装，可以在db.json所在目录下直接使用json-server --watch db.json启动服务
访问localhost:3000
发送请求，获取数据。例如GET localhost:3000/posts/1。现在你就可以将其作为一个虚拟的服务器进行请求访问了！（更多高级用法请参考官方文档！）

1.3.2、axios安装

npm安装使用

npm install axios --save

cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

如果速度很慢，可以在BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务上获取axios的国内cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
<!--或者-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

1.4、入门案例

这里我们结合使用vue，并使用axios完成从json-server获取数据：(引用了bootstrap组件库)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
      crossorigin="anonymous"
    ></script>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>

    <div class="container"