【记账本实战】04 引入 Axios 网络框架

引入 Axios 网络框架

Axios 介绍

Axios 是 Vue 官方推荐的一个网络请求库。它解决了一般 ajax 请求中的地狱回调、浏览器支持不友好、API 难用等问题，同时还支持 node.js 环境，成为了目前前端最火的网络请求库，也是我们 Vue 课程中必学的一个知识点。

什么是 Axios？

Axios 是一个 基于 promise 的 HTTP 客户端，适用于 node.js 和浏览器。它是 同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js http 模块，在客户端（浏览器）它使用 XMLHttpRequests。

特性

• 从浏览器发出 XMLHttpRequests
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 超时
• 支持嵌套条目的查询参数序列化
• 自动请求主体序列化为：
  • JSON (application/json)
  • 多部分/表单数据 (multipart/form-data)
  • URL 编码形式 (application/x-www-form-urlencoded)
• 将 HTML 表单作为 JSON 发送
• 响应中的自动 JSON 数据处理
• 浏览器和 node.js 的进度捕获，并提供额外的信息（速度、剩余时间）
• 为 node.js 设置带宽限制
• 兼容符合规范的 FormData 和 Blob（包括 node.js）
• 客户端支持防御 XSRF

安装 Axios

使用 npm 或者 yarn:

npm install axios || yarn add axios

使用 bower:

bower install axios

使用 cdn:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

我们在 daily-cost 目录下执行以下命令安装 Axios：

npm install axios

二次封装 Axios 请求库

一般我们会在 src 目录下创建一个 api 目录，专门用来存放我们项目的网络请求：

 mkdir .\src\api

接着我们在 src/api 目录下创建一个 api.js 文件，用来存放与配置应用的自定义 axios 实例：

New-Item .\src\api\api.js

接着将以下内容写入到 src/api/api.js 文件：

import axios from "axios";
import { Toast } from "vant";
import { useRouter } from "vue-router";

axios.defaults.baseURL =
  process.env.NODE_ENV == "development"
    ? "http://localhost:5173"
    : "使用线上的域名或者IP"; // 根据环境变量切换本地和线上的请求地址
axios.defaults.withCredentials = true; // 允许跨域
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["token"] = localStorage.getItem("token") || ""; // 本项目采用 token 的用户鉴权方式，在请求头的 headers 内添加 token，每次请求都会验证用户信息
axios.defaults.headers.post["Content-Type"] = "application/json";

// 响应拦截器
axios.interceptors.response.use((res) => {
  const router = useRouter(); // vue-router 4.x 的实例
  if (typeof res.data !== "object") {
    Toast.fail("服务端异常！");
    return Promise.reject(res);
  }
  // code 非 200 的情况下为异常情况
  if (res.data.code != 200) {
    if (res.data.msg) Toast.fail(res.data.msg);
    if (res.data.code == 401) {
      router.push({ path: "/login" });
    }
    return Promise.reject(res.data);
  }
  // 其他情况直接返回 data 数据
  return res.data;
});

export default axios;

在上述代码中，我们首先引入了 axios 请求库，并对发送请求过程中常用配置项进行配置。通过 axios.interceptors.response 添加响应拦截器，对服务器返回的数据状态码进行判断，做出不同的处理。

我们可以在项目中直接引入上述文件，后续的项目实战中会涉及到这块内容，这里不做赘述。

添加 CSS 预处理器 Less

Less 能为我们提升 CSS 的开发效率，它可以添加变量，我们在开发项目的时候，可以先通过定制主题色、字体大小、边距等等。当我们需要修改主题色的时候，只需要修改变量，就能实现全局的颜色变换。

首先我们需要下载 less 和 less-loader：

npm install less less-loader --save-dev

注意，安装在 devDependencies，我们只需要在打包的时候会用到他们，打完包页面中都会变成正常的 css。

接下来在 src 目录下新建 style 文件夹，在里面新建 custom.less 文件：

@primary: #18b7d3; // 主题色
@danger: #fc3c0c;
@primary-bg: #f5f5f5;

上面代码中定义了三个变量，用于存储主体色，我们会将在后续的项目实战中引入主题色，以及添加更多的变量。