补充: moment库显示中文
- 导入相关文件, 显示繁体中文
import 'moment/locale/zh-hk';
axios库的使用
前端网络请求的选择
- 目前前端中发送网络请求的方式有很多:
- 选择一: 传统的Ajax是基于XMLHTTPRequest(XHR)
-
为什么不用它呢?
image.png - 选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax
- 相对于传统的Ajax非常好用.
-
为什么不选择它呢?
image.png - 选择三: Fetch API
- 选择或者不选择它?
- Fetch是AJAX的替换方案, 基于Promise设计, 很好的进行了关注分离, 有一大批人喜欢使用fetch进行项目开发;
- 但使Fetch的缺点也很明显, 首先需要明确的是Fetch是一个车low-level(底层)的API, 没有帮助你封装好各种各样的功能和实现;
- 比如发送网络请求需要自己来配置Header的Content-Type, 不会默认携带cookie等;
- 比如错误处理相对麻烦(只有网络错误才会reject, HTTP状态码404或者500不会被标记为reject);
-
比如不支持取消一个请求, 不能查看一个请求的进度等等;
image.png
-
- 选择四: axios
- axios是目前前端使用非常广泛的网络请求库, 包括Vue作者也是推荐在vue中使用axios;
- 主要特点包括: 在浏览器中发送XMLHttpRequests请求、在node.js中发送http请求、支持Promise API、拦截请求和响应、转换请求和响应数据等等;
- axios: ajax i/o system.
Axios的基本使用
-
支持多种请求方式:
本质都是request请求.png
类型定义文件, 不意味着用TS编写.png
await和async发送网络请求.png
- axios.all的使用
axios的配置信息
- 请求配置选项
- 响应结构信息
-
全局默认配置
image.png
-
-
一个页面, 向多个服务器请求
向多个服务器请求.png 创建新的实例
axios拦截器
image.png
为什么要二次封装?
image.png
直接使用.png
二次封装的好处.png
