一、第一章:http相关
1.1.MDN文档
https://developer.mozilla.org/zh-CN/docs/Web/HTTP
1.2.HTTP请求基本过程
1.2.1.浏览器端向服务器发送HTTP请求(请求报文)
1.2.2.服务器接收到请求后,处理请求,向服务器端返回HTTP响应(响应报文)
1.2.3.浏览器接收到响应,处理请求,解析显示响应体或调用回调函数
1.3.HTTP 请求报文
1.3.1. 请求行: General
格式：method url
例如：GET/product_detail?id = 2 或 POST/login/
1.3.2. 请求头(一般有多个请求头):Request Headers
Host：www.baidu.com
Cookie：xxxxx
Content-Type-application/x-www-form-urlencoded 或者 application/json
1.3.3. 请求体
username=tom&pwd=123
{"username":"tom","pwd":"123"}
1.4.HTTP 响应报文
1.4.1. 响应行:
格式:status statusText
例如:200 ok 或 404 Not Found
1.4.2. 响应头(一般有多个)
Conten-Type:text/html;charset=utf-8
Set-Cookie:BD_CK_SAM=1;path=/
1.4.2. 响应体
html/json/js/css/图片...
1.5.常见的响应状态码
200 ok 请求成功 一般用于GET与POST请求
201 Created 已创建 成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份验证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误 无法完成请求
1.6.请求方式与请求参数
1.6.1.请求方式
POST(交差):向服务器端添加新数据------增(C)
DELETE:删除服务器端数据-----删(D)
PUT更新服务器端已存在的数据-----（改)(U)
GET(索取):从服务器端读取数据 -----查(R)
1.6.2.请求参数
1. query 参数(查询字符串参数)
1. 参数包含在请求地址中，格式为:/xxx?name=zs&height=188
2. 敏感数据不使用query参数,因为是地址的一部分 有风险
3.注:query参数又称为查询字符串参数，编码方式为urlencoded
2. params参数
1.参数包含在请求地址中，格式如下：
http://localhost:3000/add_person/zs/188
2.同理 敏感数据不使用params参数 同样有风险
3. 请求体参数
1.参数包含在请求体中，可通过浏览器开发工具查看
2.常用的两种格式:
格式一：urlencoded格式
例如:name=zs&height=188
对应请求头：Content-Type:application/x-www-form-urlencoded
格式二：json格式
例如：{“name”:"zs","height":188}
对应请求头：Content-Type:application/json
注意：
1.GET请求不能携带请求体参数 因为没有请求体
2.合理使用请求 携带的参数
3.约定 的一些
例如：form表单发送post请求 自动携带请求体参数 使用 urlencoded编码格式
jquery发送ajax-post请求时 使用带请求体参数 urlencoded编码格式
4.开发中请求发给谁？用什么请求方式？携带什么参数？----参考项目的 API 接口文档
第二章、API相关
2.1.API的分类
2.1.1 REST API(restful风格的 API) 特点 多个请求方式 一个路径
1.发送请求进行 增删改查(crud) 哪个操作由请求方式决定
2.同一个请求路径可以进行多个操作
3.请求方式有 POST/DELETE/PUT/GET
2.1.2 非REST API(restless风格的 API) 特点 多个请求方式 多个路径
1.请求方式 不决定哪个操作
2.一个请求路径对应一个操作
3.一般只有POST/GET
2.2.使用json-server 搭建 REST API
2.2.1 json-server是什么
https://github.com/typicode/json-server
1.用来快速搭建 REST API 的工具包
2.安装 JSON 服务器 CMD 全局安装 npm install -g json-server
3.启动 JSON 服务器 json-server db.json
4.可自定义db.json里面的数据
2.2.2 postman工具 进行接口测试
接口测试跑通之后，想要保存接口 Ctrl + s
这样下次打开Postman左侧有测好的记录
json-server 测试put请求 携带id 只能通过params方式 在url路径后面追加的方式
2.2.3 一般http请求与ajax请求 二者的关系
1.ajax请求是一种特别的http请求;包含关系
2.对于服务器端 二者没有区别 是浏览器端有区别
3.浏览器端发请求 :只有XHR或fetch发出的才是ajax请求,其他所有的都是 非ajax请求
4.浏览器端接收到响应:
(1).一般请求,浏览器端一般会直接显示响应体数据,常说的 自动刷新了/跳转页面了
(2).ajax请求,浏览器端不会对界面进行任何更新操作,是调用监视的回调函数并传入响应相关数据
第三章 axios的理解与使用
3.1. axios是什么
1.目前 前端最流行的ajax请求库;
2.react/vue官方都推荐的 一个请求库
3.文档:https://github.com/axios/axios
3.2. axios特点
1.基于promise的异步(解决回调地狱问题) ajax请求库
2.浏览器/node都可以使用
3.支持 请求/响应拦截器
4.支持请求取消
5.请求/响应数据转换
6.批量发生多个请求
3.3. 使用axios 发送请求
新建文件src 新建index.html文件 引入axios 关键字axios
<button id="btn1">获取所有人</button>
<button id="btn2">获取某个人</button>
<input id="person_id" type="text" placeholder="请输入一个人的id"></input><br>
<button id="btn3">添加一个人</button>
<input id="person_name" type="text" placeholder="请输入名字"></input>
<input id="person_age" type="text" placeholder="请输入年龄"></input>
<script type="text/javascript">
//
const btn1 = document.getElementById('btn1');
btn1.onclick =()=>{
//函数体 发送get 请求 没有携带参数 (完整版)
// var result = axios({
// url: 'http://localhost:3000/status',
// method: 'GET',
// })
// .then(function (response) {
// console.log('请求成功了', response);
// })
// .catch(function (error) {
// console.log('请求错误', error);
// });
// console.log(result);//Promise实例
//精简版 如果后续场景需求不单一 还是完整版较合理
axios.get('http://localhost:3000/status').then(
response =>{
console.log('请求成功了', response.data)
},
error =>{
console.log('请求错误', error);
}
)
}
//携带query参数发请求
const personId = document.getElementById('person_id')
btn2.onclick = () => {
//完整版
axios({
url: 'http://localhost:3000/status',
method: 'GET',
params: { id: personId.value }//携带参数(params)字段 却是query参数
}).then(
response => {
console.log('请求成功了', response.data)
},
error => {
}
)
//精简版
axios.get('http://localhost:3000/status', { params: { id: personId.value } }).then(
response => {
console.log('请求成功了', response.data)
},
error => {
}
)
}
const btn3 = document.getElementById('btn3');
const person_name = document.getElementById('person_name');
const person_age = document.getElementById('person_name');
btn3.onclick = ()=>{
axios({
url:'http://localhost:3000/status',
method:"POST",
data:{name:person_name.value,age:person_age.value} // 携带请求体参数(json编码 常用 )
// data:`name=${person_name.value}&age=${person_age.value}` // 携带请求体参数 (urlencoded编码)
}).then(
function (response) {
console.log('请求成功了', response.data)
},
error => {
}
)
//精简版
axios.get('http://localhost:3000/status',{name:person_name.value,age:person_age.value}).then(
response => {
console.log('请求成功了', response.data)
},
error => {
}
)
}
//删除一个信息
const btn5 = document.getElementById('btn5')
const deleteId = document.getElementById('deleteId')
btn5.onclick = ()=>{
//完整版
// axios({
// url:`http://localhost:3000/status/${deleteId.value}`,//携带 params 参数
// method:'DELETE',
// }).then(
// response =>{
// console.log('请求了'.response.data);
// },
// error =>{
// console.log('失败了'.error);
// }
// )
//精简版
axios.delete(`http://localhost:3000/status/${deleteId.value}`).then(
response => {
console.log('请求了', response.data)
},
error => {
}
)
}
</script>
1.axios返回的是一个 Promise实例对象
2.成功的值 是xios封装的 response对象,失败是error对象
3.//携带query参数时,编写的配置项叫做params
4.携带params参数时, params参数只能在URL路径中拼接 /
3.4 常用配置项
axios({
url: "http://localhost:3000/status",
method: "GET",
// params: { id }, //配置 query参数
// data: { c: 3, d: 4 },//配置请求体参数 (json编码格式)
// data: `e=5&f=6`,//配置请求体参数 (urlencoded编码格式)
// timeout: 3000//配置超时时间
// headers: { demo:123 }//配置请求头
responseType:'json'// 配置响应数据的格式(默认值)
})
3.5 axios的create方法
<!--
1.根据指定配置创建一个新的axios ,也就是每个新axios都有自己的配置
2.新axios只有 没有(取消请求) 和 (批量发请求) 的方法 其他所有语法都是一致的
3.为什么要设计这个语法?
需求:项目中有部分接口需要的配置 与另一部分接口需要的配置不一样
4.优先级 配置的优先级
配置将会按优先级进行合并。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后面的优先级要高于前面的。
-->
const axios2 = axios.create({
timeout: 3000,
baseURL: 'https://api.apiopen.top'
})
2385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
