基础知识

HTTP

浏览器向服务器发送 HTTP 请求（请求报文）
服务器接收到请求后，处理请求，向浏览器返回 HTTP 响应（响应报文）
浏览器端接收到响应，解析 显示响应体 或 调用回调函数

浏览器控制台显示方式不是按照报文格式显示

请求报文（请求）

请求行：
1. 格式：method url
2. 例如：GET / product_detail?id=2
请求头（多个）
1. Host：www.baidu.com
2. Cookie：xxxxxxx
3. Content-Type：xxxxxxxx
请求体
1. GET 请求没有请求体
2. POST：{“username”:”tom”, “pwd”:123}

响应报文（响应）

响应行
1. 格式：status statusText
2. 例如：200 OK 或 404 Not Found
响应头（多个）
1. Content-Type:xxxxxxx
2. Set-Cookie:xxxxxxxx
响应体
1. 多种文件/数据格式

HTTP 请求和 ajax 请求

ajax 请求是特殊的 HTTP 请求
对服务器来说，没有任何区别
浏览器发送的请求：
- XHR 和 fetch 发送的是 ajax 请求，其他的都不是 ajax 请求
浏览器接收的响应：
1. 一般请求：浏览器一般会直接显示响应体数据，即自动刷新/跳转页面
2. ajax 请求：浏览器不会对界面进行任何更新操作，只是调用监视的回调函数并传入响应相关参数

请求方式

请求方式（含义）

GET
1. （查）
2. 从服务器读取数据
POST
1. （增）
2. 向服务器添加新数据
PUT
1. （改）
2. 更新服务器已经存在的数据
DELETE
1. （删）
2. 删除服务器数据

请求参数

query 参数
1. 又称：查询字符串参数
2. 参数包含在请求地址中：格式：/xxx?name=xx&age=xx
3. 敏感数据不要用 query 参数
4. 编码方式：urlencoded
params 参数
1. 参数包含在请求地址中：格式：http://localhost:300/xxx/xxx/xx
2. 敏感数据不要用 params 参数
请求体参数（body）
1. 参数包含在请求体中
2. 通过浏览器开发工具或抓包工具查看
3. 格式：
  1. urlecdoed 格式
    1. 例如：name=tom&age=18
    2. 对应请求头（必添加）：Content-Type:application/x-www-form-urlencoded
  2. json 格式
    1. 例如：{“name”:”tom”,”age”:12}
    2. 对应请求头（必添加）：Content-Type:application/json

注意事项

GET 请求不能携带 请求体参数（body），GET 请求没有请求体
除 GET 请求以外的其他 请求方式，可以随意搭配 请求参数
除 GET 请求以外的其他 请求方式，可以在一个请求中同时使用 3 种 请求参数 ，但一般不这么做

服务端 API 实现

REST API（restful 风格的 API）
- 服务端通过前端的请求方式进行决定增删改查
- 同一个请求路径可以进行多种操作
- 前端请求方式会用到，GET/POST/PUT/DELETE
非 REST API（restless 风格的 API）
- 服务端通过不同请求路径决定增删改查
- 前端请求方式一般只用 GET/POST
- 一个请求路径，对应一个操作方式（增删改查）

接口测试

json-server

前端用来快速搭建一个用于数据测试的服务器，数据用 json 文件存储
基于 REST API 的服务器（通过请求方式处理数据）
数据测试的服务器使用 cors 解决了跨域问题

使用步骤

安装
- npm i json-server -g
cmd 进入指定目录
创建/运行 json 数据文件
- json-server xxx.json
- 完整命令：json-server --watch xxx.json
- 没有指定 json 文件就创建，并启动服务器，作为服务器数据
- 如果 json 文件存在，则启动服务器，并作为服务器数据

postman

postman 接口测试工具，一个用来测试接口返回数据是否正常的软件

postman 可以进行跨域测试，Headers 选项中添加 Origin 请求头，值为 请求的域名/IP

（postman）官网：https://www.postman.com/
（国产apipost）官网：https://www.apipost.cn/

axios

前端 ajax 请求库

文档：https://github.com/axios/axios

特点

基于 Promise 的异步 ajax 请求库
浏览器端/node端都可以使用
支持请求/响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求

功能说明

axios 调用的返回值是 Promise 实例
回调形参（建议）
1. 成功回调形参：response
2. 失败回调形参：error
response 对象的属性
1. config：请求配置对象（包括：请求头、请求方式、请求地址等）
2. data：响应的数据
3. headers：响应头
4. request：就是原始 xhr
5. status：http 状态码
6. statusText：http 状态文本

基础实现

query 形式参数，使用 params 配置项定义
params 形式参数，没有配置项，直接在 url 后定义
body 请求体参数，有两种数据格式（编码形式）
1. urlencoded：name=xxx&age=18
2. json：{name:xxx,age:18}

GET

GET请求（完整版）

var p = axios({
   url:"http://localhost:5000/xxx", //请求地址
   method:"GET",                    //请求方式
   params:{name:"xxx"},             //定义 query 参数形式，携带的参数
})

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

GET请求（精简版）

var p = axios.get(
   "http://localhost:5000/xxx",  //请求地址
   {params:{name:"xxxx"}}        //传递参数需要携带 params 配置项，定义 query 参数形式，携带的参数
)

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

POST

POST请求（完整版）

var p = axios({
   url:"http://localhost:5000/xxx", //请求地址
   method:"POST",                   //请求方式
   data:{name:"xxx"},               //携带请求体参数（json编码）
   //data:"name=xxx&age=18"         //携带请求体参数（urlencoded编码）
})

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

POST请求（精简版）

var p = axios.post(
   "http://localhost:5000/xxx",  //请求地址
   {name:"xxxx"},                //携带请求体参数（json编码）
   //"name=xxx&age=18"           //携带请求体参数（urlencoded编码）
)

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

PUT

PUT请求（完整版）

var p = axios({
   url:"http://localhost:5000/xxx", //请求地址
   method:"PUT",                    //请求方式
   data:{name:"xxx"},               //携带请求体参数（json编码）
   //data:"name=xxx&age=18"         //携带请求体参数（urlencoded编码）
})

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

PUT请求（精简版）

var p = axios.put(
   "http://localhost:5000/xxx",  //请求地址
   {name:"xxxx"},                //携带请求体参数（json编码）
   //"name=xxx&age=18"           //携带请求体参数（urlencoded编码）
)

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

DELETE

DELETE请求（完整版）

var p = axios({
   url:"http://localhost:5000/xxx/yyy",   //请求地址---携带 params 参数
   method:"DELETE",                       //请求方式
})

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

DELETE请求（精简版）

var p = axios.delete(
   "http://localhost:5000/xxx/yyy"  //请求地址---携带 params 参数
)

p.then(
   response => {console.log("请求成功", response)},   // axios 中 value 形参推荐使用 response
   error => {console.log("请求失败", error)}          // axios 中 reason 形参推荐使用 error
)

配置项

常用配置项

url
- 请求地址
method
- 请求方式
params
- 配置 query 参数
data
- 配置请求体参数（json编码）
- 配置请求体参数（urlencoded编码）
timeout
- 配置超时时间
headers
- 配置请求头
responseType
- 配置响应数据格式
- 指定json，返回值必定转换为json对象，如果不是json格式，结果为null
- 不定义配置项为 json，结果也会转为 json 对象，非 json 返回值作为字符串
cancelToken
- 取消请求配置项

var p = axios({
   url:"https://xxx/xxx/xxx",    //请求地址
   method:"GET",                 //请求方式
   params:{name:"小红"},         //配置 query 参数
   data:{c:3},                   //配置请求体参数（json编码）
   data:"name=小红&age=18",      //配置请求体参数（urlencoded编码）
   timeout:2000,                 //配置超时时间
   headers:{token:"xxxxxxx"},    //配置请求头
   responseType:"json"           //配置响应数据格式（指定json，返回值必定转换为json对象，如果不是json格式，结果为null。不定义值，json 结果也会转为 json 对象）
})

p.then(
   response => {console.log(成功了)}
   error => {console.log(失败了)}
)

统一配置

给 axios 配置统一的配置项，配置好之后，后面用到的所有 axios 都在此配置项基础上发送请求

统一超时：axios.defaults.timeout = 2000
统一请求头：axios.defaults.headers = {token:"xxxxxx"}
统一基础url：axios.defaults.baseURL = "http://localhost:5000"

axios.defaults.timeout = 2000
axios.defaults.headers = {token:"xxxxxx"}
axios.defaults.baseURL = "http://localhost:5000"

var p = axios({
   url:"/xxx", //baseURL 基础上的路径
   method:"GET"
})

p.then(
   response => {console.log(成功了)}
   error => {console.log(失败了)}
)

create 方法

axios 的 create 方法，用来克隆一个新的 axios
创建新的 axios 配置项中定义通用配置内容
新的 axios 没有取消请求和批量发送请求的方法
用于与默认 axios 和其他新的 axios 的统一配置项分开

var axios2 = axios.create({
   timeout:3000,
   headers:{name:"小红"},
   baseURL:"https://loaclhost:5000"
})

var p = axios2({
   url:"xxxx",
   method:"GET"
})

p.then(
   response => {console.log(成功了)}
   error => {console.log(失败了)}
)

请求拦截器

真正发送请求前执行的一个回调函数
对所有请求的统一处理：追加请求头、追加参数、界面loading提示等等
需要定义回调函数，回调函数形参为请求的所有信息（即：axios的配置对象）
必须 return 返回请求信息，请求才能正常发送
可以定义多个请求拦截器，后指定的先执行

axios.interceptors.request.use(function(config){....})

axios.interceptors.request.use((config)=>{
   config.headers.token = "xxxxxx"  //给请求头添加 token
   return config                    //返回请求信息
})

响应拦截器

得到响应后执行的一组回调函数
定义成功/失败两个回调函数，形参为响应信息
HTTP 状态码不是 2 开头的调用失败回调，是 2 开头的调用成功回调
成功或失败回调函数必须 return 信息，返回的信息决定 axios 返回值 Pormise 实例状态和值（只看返回值不看是哪个回调返回的）
在 axios 返回值 promise 调用 then 之前调用
对成功和失败进行相应处理

axios.interceptors.response.use(response=>{...},error=>{...})

axios.interceptors.response.use(
   response => {
      return response.data          //只返回
   },
   error => {
      console.log("请求出错")
      return new Promise(()=>{})    //返回空 promise 实例，then 就不走成功或失败回调
   }
)

;(async ()=>{
   const result = await axios.get("http://localhost:5000")  //直接获取成功值。失败的话在响应拦截器已经做了统一处理
   console.log(result)
})()

取消请求

获取 axios 上的 CanselToken 属性（构造函数）
axios 配置项定义 canselToken 属性，并 new CanselToken(()=>{…})
实例化 CanselToken 需要传入一个回调函数
回调函数形参由外层变量接收
调用这个形参，则取消请求（可以传入参数，取消信息修改 error.message 属性）
目的：原生 xhr 取消请求有可能也会发送出去，此处封装的代码不会出现这个情况

const {CancelToken} = axios;  //结构赋值获取 CancelToken 构造函数
var quxiao;

axios({
   url:"http://localhost:5000",
   method:"GET",
   cancelToken: new CancelToken((c)=>{ //实例化
      quxiao = c; //取消请求函数由外层变量接收
   })
}).then(
   response => {...}
   error => {...}
)

quxiao("不想要了");   //调用c，取消请求，传入参数取消原因修改 error.message 属性值

取消请求提示信息

isCancel 函数用于判断是否是取消请求导致的调用失败回调

获取 axios 上的 isCancel 属性（函数）
在 axios 返回值 promise 调用 then 的失败回调中进行调用
用于判断是否是取消请求

const {CancelToken, isCancel} = axios;
var quxiao;

axios({
   url:"http://localshot:5000",
   method:"GET",
   cancelToken: new CancelToken((c)=>{ //实例化
      quxiao = c; //取消请求函数由外层变量接收
   })
}).then(
   response => {
      console.log("请求成功")
   },
   error => {
      if(isCancel(error)){    //判断是否是取消请求z造成的失败
         console.log("用于取消了请求原因是：", error.message)  //输出从取消请求时传入的说明
      }else{
         console.log("请求失败", error)
      }
   }
)

quxiao("不想要了");   //调用c，取消请求，传入参数取消原因修改 error.message 属性值

批量发送请求

通过 axios 中的 all 函数，进行批量发送
接收一个数组实参，数组元素为每个 axios 返回值 promise
then 成功回调值为，数组形式的每个 axios 请求成功的返回值
then 失败回调值为，失败那个 axios 请求失败的提示

axios.all([
   axios.get("http://localshot:5000/text1"),
   axios.get("http://localshot:5000/text2"),
   axios.get("http://localshot:5000/text3")
]).then{
   response => {...}
   error => {...}
}