axios学习笔记

一、HTTP相关文档

MDN官方文档
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview

（一）、HTTP请求交互的基本过程

（二）、HTTP请求报文

1、请求行
①、请求方式： method
②、请求地址： url
例如：GET/product_detail?id=2或者POST/login
2、多个请求头
①、Host:www.baidu.com
②、Cookie:BAIDUID=AD3B0FFA706；BIDUPSID=AD3B0FFA706
③、Content-Type:描述请求体的格式。application/x-www-form-urlencoded或者application/json

3、请求体
①、urlencoded格式：username=tom&pwd=123
②、json格式：{“username”:“tom”,“pwd”:123}

（三）、HTTP响应报文

1、响应状态行：status statusText
2、多个响应头：
①、Content-Type:描述响应体的格式。text/html;charset=utf-8
②、Set-Cookie:BD_CK_SAM=1;path=/
3、响应体：
html文本/json文本/js/css/图片…

（四）、常见的响应状态码

200 OK 请求成功。一般用于GET与POST请求。
201 Created 已创建。成功请求并创建了新的资源。
401 Unauthorized 未授权/请求要求用户的身份认证。
404 Not Found 服务器无法根据客户端的请求找到资源。
500 Internal Server Error 服务器内部错误，无法完成请求。

（五）、不同类型的请求及作用

1、GET:从服务器端读取数据
2、POST：向服务器端添加新数据
3、PUT:更新服务器端已经获取的数据
4、DELETE：删除服务器端数据

（六）、API分类

1、REST API ：restful
①、发送请求进行CRUD哪个操作由请求方式来决定；
②、同一个请求路径可以进行多个操作；
③、请求方式会用到GET/POST/PUT/DELETE。
2、非REST API ：restless
①、请求方式不决定请求的CRUD操作；
②、一个请求路径只对应一个操作；
③、一般只有GET/POST。

二、XHR的理解和使用

MDN官方文档
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

（一）、理解

1、使用XMLHttpRequest(XHR)对象可以与服务器交互，也就是发送AJXA请求
2、前端可以获取到数据，而无需让整个的页面刷新
3、这使得Web页面可以只更新页面的局部，而不影响用户的操作。

（二）、区别一般http请求与ajax请求

1、ajax请求是一种特别的http请求。
2、对服务器端来说，没有任何区别，区别在浏览器端
3、浏览器端发请求，只有XHR或fetch发出的才是ajax请求，其它所有的都是非ajax请求。
4、浏览器接收到响应：
①、一般请求：浏览器一般会直接显示响应体数据，也就是我们常说的刷新、跳转页面
②、ajax请求：浏览器不会对界面进行任何更新操作，只是调用监视的回调函数并传入响应相关数据。

（三）、API

1、XMLHttpRequest:创建XHR对象的构造函数。
2、status:响应状态码值，比如200,404
3、statusText：响应状态文本
4、readyState:标识请求状态的只读属性
①、0：初始
②、1：open（）之后
③、2：send()之后
④、3：请求中
⑤、4：请求完成
5、onreadystatechange:绑定readyState改变的监听
6、responseType:指定响应数据类型，如果是‘json’，得到响应后自动解析响应体数据。
7、response：响应体数据，类型取决于responseType的指定
8、timeout:指定请求超时时间，默认为0代表没有限制
9、ontimeout：绑定超时的监听。
10、onerror:绑定请求网络错误的监听
11、open（）：初始化一个请求，参数为{method,url,async}
12、send(data):发送请求
13、abort（）：中断请求
14、getResponseHeader(name):获取指定名称的响应头值
15、getAllResponseHeaders():获取所有响应头组成的字符串
16、setRequestHeader(name,value):设置请求头

（四）、XHR的ajax封装（简单版axios）

1、特点：
①、函数的返回值为promise，成功的结果为response，异常的结果为error
②、能处理多种类型的请求：GET/POST/PUT/DELETE
③、函数的参数为一个配置对象
{
url：’’，//请求地址
method:’’,//请求方式GET/POST/PUT/DELETE
params:{},//GET/DELETE请求的请求的query参数
data:{},//POST或DELETE请求的请求体参数
}
④、响应json数据自动解析为js

（五）、axios的理解和使用

1、axios是什么？
①、前端最流行的ajax请求库
②、react/vue官方都推荐使用axios发ajax请求
③、文档：https://github.com/axios/axios
2、axios的特点
①、支持promise API
②、浏览器端发送XMLHttpRequests请求
③、node.js中发送http请求
④、支持请求/响应拦截器
⑤、转换请求和响应数据
⑥、批量发送多个请求
3、axios常用语法
axios(config)：通用/最本质的发任意类型请求方式
axios(url[, config])：可以指定url发GET请求
axios.request(config)：等同于axios(config)
axios.get(url[, config])：发GET请求
axios.delete(url[, config])：发DELETE请求
axios.post(url[, data[, config]])：发POST请求
axios.put(url[, data[, config]])：发PUT请求

axios.defaults.xxx：请求的默认全局配置
事实上，在开发中可能很多参数都是固定的。这个时候我们可以进行一些抽取，也可以利用axios的全局配置。

常见的配置选项有下面这几个
当请求类型是method:'get’时，传的是params:{id:12}；当请求类型是method:'post’时，传的是data:{key:'aa}

axios.interceptors.request.use()：添加请求拦截器
axios.interceptors.response.use()：添加响应拦截器

axios.create([config])：创建一个新的axios（它没有下面的功能）

axios.Cancel()：用于创建取消请求的错误对象。
axios.CancelToken()：用于创建取消请求的token对象
axios.isCancel()：是否是一个取消请求的错误。

axios.all(promises)：用于批量执行多个异步请求。
有时候，我们可能需要同时发送两个请求
使用axios.all，可以放入多个请求数组。
axios.all({}) 返回的结果是一个数组，使用axios.spreas可将数组[res1mres2]展开为res1,res2。

axios.spread()：用来指定接收所有成功数据的回调函数的方法。
4、难点语法的理解和使用
①、axios.create([config])
根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置。
新axios知识没有取消请求和批量发请求的方法，其他所有语法都是一致的。
为什么需要设置这个语法？
因为当有这样的需求时，比如项目中有部分接口需要的配置不太一样，如何处理；那么就可以创建2个新axios，每个都有自己特有的配置，分别应用到不同要求的接口请求中。

const instance1=axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
});
instance1({
  url: '/home/multidata'
}).then(res=>{
  console.log(res);
});
instance1({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res)
});

const instance2=axios.create({
  baseURL:'http://222.111.33.33:8000',
  timeout:10000
});

②、拦截器函数/ajax请求/请求的回调函数的调用顺序

此流程是通过promise串联起来的，请求拦截器传递的是config，响应拦截器传递的是response

③、取消请求
基本流程
配置cancelToken对象
缓存用于取消请求的cancel函数
在后面特定时机调用cancel函数取消请求
在错误回调中判断，如果是error或者是cancel，作相应处理。
实现功能