视频P1-P13
一、json-server工具包的安装
1、安装
使用npm全局安装
npm install -g json-server
查看版本号
json-server -v
2、创建json数据 —— db.json
在项目文件夹根目录下，执行代码：json-server --watch db.json会产生一个db.json文件
3、使用
访问json-server --watch db.json运行的对应地址，即可访问对应接口的json数据，如：http://localhost:3000/posts
二、HTTP相关复习
1、前后台交互的基本过程
1. 前后应用从浏览器端向服务器发送HTTP请求(请求报文)
2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
3. 浏览器端接收到响应, 解析显示响应体/调用监视回调
2. HTTP请求报文
1. 请求行: 请求方式/url
2. 多个请求头: 一个请求头由name:value组成, 如Host/Cookie/Content-Type头
3. 请求体
3. HTTP响应报文
1. 响应行: 响应状态码/对应的文本
2. 多个响应头: 如 Content-Type / Set-Cookie 头
3. 响应体
4. post请求体文本参数格式
1. Content-Type: application/x-www-form-urlencoded;charset=utf-8
用于键值对参数，参数的键值用=连接, 参数之间用&连接
例如: name=%E5%B0%8F%E6%98%8E&age=12
2. Content-Type: application/json;charset=utf-8
用于json字符串参数
例如: {"name": "%E5%B0%8F%E6%98%8E", "age": 12}
5. 常见响应状态码
200 OK 请求成功。一般用于GET与POST请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求
6. 同类型的请求及其作用
1. GET: 从服务器端读取数据
2. POST: 向服务器端添加新数据
3. PUT: 更新服务器端已经数据
4. DELETE: 删除服务器端数据
7. API的分类
1. REST API: restful
发送请求进行CRUD哪个操作由请求方式来决定
同一个请求路径可以进行多个操作
请求方式会用到GET/POST/PUT/DELETE
2. 非REST API: restless
请求方式不决定请求的CRUD操作
一个请求路径只对应一个操作
一般只有GET/POST
三、使用XHR封装一个发ajax请求的通用函数
1. 区别ajax请求与一般HTTP请求
ajax请求是一种特别的http请求: 只有通过XHR/fetch发送的是ajax请求, 其它都是一般HTTP请求
对服务器端来说, 没有任何区别, 区别在浏览器端
浏览器端发请求: 只有XHR或fetch发出的才是ajax请求, 其它所有的都是非ajax请求
浏览器端接收到响应
一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据
2. 封装简易版axios
1、函数的返回值为promise，成功的结果为response，失败的结果为error
2、能处理多种类型的请求：GET/POST/PUT/DELETE
3、函数的参数为一个配置对象
{
url: '', // 请求地址
method: '', // 请求方式GET/POST/PUT/DELETE
params: {}, // GET/DELETE请求的query参数
data: {}, // POST或DELETE请求的请求体参数
}
4、响应json数据自动解析为js的对象/数组
function axios({
url,
method='GET', // 指定默认值为get
params={},
data={}
}) {
// 返回一个promise对象
return new Promise((resolve, reject) => {
// 处理method
method = method.toUpperCase()
// 处理query参数（拼接到url上） id=1&xxx=abc
let queryString = ''
// Object.keys的用法：https://blog.csdn.net/weixin_46663768/article/details/106626685
Object.keys(params).forEach(key => {
queryString += `${key}=${params[key]}&`
})
if (queryString) {
// 去除最后的&
queryString = queryString.substring(0, queryString.length-1)
// 接到url
url += '?' + queryString
}
// 1、执行异步ajax请求
// 创建xhr对象
const request = new XMLHttpRequest()
// 打开连接（初始化请求，没有请求）
request.open(method, url, true)
// 发送请求
if (method==='GET' || method==='DELETE'){
request.send() // 异步执行
} else if (method==='POST' || method==='PUT'){
request.setRequestHeader('Content-Type', 'application/json;charset=utf-8') //告诉服务器请求体的格式是json 如果发送json格式数据必须添加请求头
request.send(JSON.stringify(data)) // 发送json格式请求体参数
}
// 绑定状态改变的监听
request.onreadystatechange = function () {
// 如果请求没有完成，直接结束
if (request.readyState !== 4) {
return
}
// 如果响应状态码在[200, 300]之间标识成功，否则失败
const {status, statusText} = request
// 2.1、如果请求成功，调用resolve
if (status>=200 && status<=299) {
const response = {
data: JSON.parse(request.response), // 响应json数据自动解析为js的对象/数组
status,
statusText
}
resolve(response)
} else { // 2.2、如果请求失败，调用reject
reject(new Error('request error status is ' + status))
}
}
})
四、axios的特点
基本promise的异步ajax请求库
浏览器端/node端都可以使用
支持请求／响应拦截器
支持请求取消
请求/响应数据转换
批量发送多个请求
五、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.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的token对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法
1. axios.create(config)
a. 根据指定配置创建一个新的axios, 也就是每个新axios都有自己的配置
b. 新axios只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的
c. 为什么要设计这个语法?
需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
解决: 创建2个新axios, 每个都有自己特有的配置, 分别应用到不同要求的接口请求中
axios.defaults.baseURL = 'http://localhost:3000'
axios({
url: '/posts'
})
const instance = axios.create({
baseURL: 'http://localhost:4000'
})
// 使用instance发请求
instance({
url: '/posts'
})
instance.get('./xxx')
2. 请求拦截器axios.interceptors.request.use
axios.interceptors.request.use((config) => {
// 在准备发请求前，取消未完成的请求
if(typeof cancel === 'function'){
cancel('取消请求')
}
// 添加一个CancelToken的配置
config.cancelToken = new axios.CancelToken(function executor(c) { // c是用于取消当前请求的函数
// 保存取消函数，用于之后可能需要取消当前请求
cancel = c
})
return config
})
3. 响应拦截器axios.interceptors.response.use
axios.interceptors.response.use(
response => {
cancel = null
return response
},
error => {
if (axios.isCancel(error)){ // 取消请求的错误
console.log('请求取消的错误', error.message)
// 中断promise链
return new Promise(() => {})
} else { // 请求出错了
cancel = null
// 将错误向下传递
// throw error
return Promise.reject(error)
}
}
)
