Day13. React中的网络请求

补充: 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的配置信息

• 1. 请求配置选项
• 2. 响应结构信息

• 3. 全局默认配置

     
     
     image.png

• 一个页面, 向多个服务器请求

  
  
  向多个服务器请求.png

• 创建新的实例

axios拦截器

image.png

为什么要二次封装?

image.png

直接使用.png

二次封装的好处.png