自己创建一个APi
API的分类
REST API: restful (Representational State Transfer (资源)表现层状态转化)
(1) 发送请求进行CRUD 哪个操作由请求方式来决定
(2) 同一个请求路径可以进行多个操作
(3) 请求方式会用到GET/POST/PUT/DELETE
非REST API: restless
(1) 请求方式不决定请求的CRUD 操作
(2) 一个请求路径只对应一个操作
(3) 一般只有GET/POST
使用json-server搭建REST API
json-server是什么
用来快速搭建REST API 的工具包
使用json-server
- 在线文档: https://github.com/typicode/json-server
- 下载:
npm install -g json-server
- 目标根目录下创建数据库 json 文件:
db.json
1 | { |
启动服务器执行命令: npx json-server --watch db.json
axios
介绍
- 文档: https://github.com/axios/axios
- 基于 xhr + promise 的异步 ajax请求库
- 浏览器端/node 端都可以使用
- 支持请求/响应拦截器
- 支持请求取消
- 请求/响应数据转换
- 批量发送多个请求
常用语法
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: 请求的默认全局配置(method\baseURL\params\timeout…)
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法
响应报文
响应报文分为四个部分:响应头、响应行、响应体、相应空行
使用axios访问测试
1 |
|
XHR 的 ajax 封装 (简单版axios)
特点
- 函数的返回值为
promise
, 成功的结果为response
, 失败的结果为error
- 能处理多种类型的请求: GET/POST/PUT/DELETE
- 函数的参数为一个配置对象
1 | { |
使用测试
1 | // 1. GET请求:从服务器端获取数据 |