【前端】-【axios】-学习笔记

Json 2022-07-23

【前端】-【axios】-学习笔记

1. HTTP 相关 （准备共作）

1.1 HTTP请求交互的基本过程

在这里插入图片描述

1.前后应用从浏览器端向服务器发送 HTTP 请求(请求报文)
2.后台服务器接收到请求后,调度服务器应用处理请求,向浏览器端返回HTTP响应(响应报文)
3.浏览器端接收到响应,解析显示响应体/调用监视回调

1.2 请求报文

HTTP 请求报文由请求行、请求头、空行和请求包体(body)组成。

在这里插入图片描述

  1. 请求行
    methodurl:GET/product_detail?id=2POST/login
  2. 多个请求头
    Host:www.baidu.com
    Cookie:BAIDUID=AD3B0FA706E;BIDUPSID=AD3B0FA706;
    Content-Type:application/x-www-form-urlencoded
    或者application/json
  3. 请求体
    username=tom&pwd=123
    {“username”:“tom”,“pwd”:123}

1.3 响应报文

HTTP 响应报文由状态行、响应头部、空行和响应包体(body)组成

  1. 响应状态行:statusstatusText
  2. 多个响应头
    Content-Type:text/html;charset=utf-8
    Set-Cookie:BD_CK_SAM=1;path=/
  3. 响应体html文本/json文本/js/css/图片…

在这里插入图片描述

1.4 常见的响应状态码

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

1.5 请求方式与请求参数

1.请求方式

  1. GET:从服务器端读取数据 查 （get请求不能发请求体参数）
  2. POST:向服务器端添加新数据 增
  3. PUT:更新服务器端已经数据 改
  4. 4DELETE:删除服务器端数据 删

2.请求参数

1. query参数（查询字符串参数）

  1. 参数包含在请求地址中，格式是：/xxxx?name=tom&age=18
  2. 敏感数据不要使用query参数，因为参数是地址的一部分，比较危险
  3. 备注：query参数又称查询字符串参数，编码方式为urlencoded

2. params参数

  1. 参数包含在请求地址中，格式是：
    http://localhost:3000/add_person/tom/18
  2. 敏感数据不要使用query参数，因为参数是地址的一部分，比较危险

3. 请求体参数

  1. 参数包含在请求体中，可以通过浏览器开发工具查看
  2. 常用两种格式：
    格式一：urlencoded格式
    例如： name=tom&age=18
    对应请求头：Content-Type:application/x-www-form-urlencoded
    格式二：json格式
    例如{“name”：“Tom”,“age”：18}
    对应请求头：Content-Type:application/json

特别注意

  1. GET请求不能携带请求体参数，因为GET请求没有请求体
  2. 理论上，一次请求可以随意使用上述三种类型参数中的任何一种，甚至一次请求3个参数可以用三种形式携带，但一般不这么做。
  3. 一般来说，有一些约定俗成的规矩：
    （1）例如form表单发送POST请求时：自动使用请求体参数，用urlencoded编码。
    （2）例如jQuery发送ajax-post请求时：自动使用请求体参数，用urlencoded编码。
  4. 开发中请求到底发给谁？用什么请求？携带什么参数？。。。参考项目的API接口文档

2. API 相关

2.1 API分类

  1. REST API: restful （Representational State Transfer (资源)表现层状态转化）
    (1) 发送请求进行CRUD 哪个操作由请求方式来决定
    (2) 同一个请求路径可以进行多个操作
    (3) 请求方式会用到GET/POST/PUT/DELETE
  2. 非REST API: restless
    (1) 请求方式不决定请求的CRUD 操作
    (2) 一个请求路径只对应一个操作
    (3) 一般只有GET/POST

2.2 使用json-server 搭建REST API

2.2.1 json-server 是什么?

用来快速搭建REST API 的工具包
10秒快速建一个服务器

2.2.2 使用json-server

在线文档: https://github.com/typicode/json-server

  1. 下载安装（全局）: npm install -g json-server
  2. 目标根目录下创建数据库 json 文件: db.json
  3. 启动服务器执行命令: json-server --watch db.json 
#db.json 文件
{
	"posts": [
		{ "id": 1, "title": "json-server", "author": "typicode" },
		{ "id": 2, "title": "json-server2", "author": "typicode" }
	],
	"comments": [
		{ "id": 1, "body": "some comment", "postId": 1 }
	],
	"profile": { "name": "typicode" }
}

2.2.3 使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1

2.2.4 使用 postman 测试接口

测试 GET/POST/PUT/DELETE

json-server 模拟的服务器，id必须用params带，其他的可以用请求体：
http://localhost:3000/students/3

GET query参数

在这里插入图片描述


get Params参数

在这里插入图片描述


请求体 urlencoded形式

在这里插入图片描述


请求体 json形式

在这里插入图片描述

2.2.5 一般http请求与 ajax请求

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

3 axios的理解和使用

3.1 axios是什么?

  1. 前端最流行的ajax请求库
  2. react/vue官方都推荐使用axios发ajax请求
  3. 文档:https://github.com/axios/axios

3.2 axios特点

  1. 基本promise的异步ajax请求库
  2. 浏览器端/node端都可以使用
  3. 支持请求／响应拦截器
  4. 支持请求取消
  5. 请求/响应数据转换
  6. 批量发送多个请求

接口文档是:由 工具 api-doc 写一些注释，就能生成
拿到文档 先用postman测试

3.2 axios 基本使用

引入

  1. axios调用的返回值是Promise实例
  2. 成功的值叫response，失败的叫error
  3. axios 成功的值是一个axios封装的response对象，服务器返回的真实数据在response.data中
  4. 携带query参数的配置项叫做params
  5. 携带parmas 需要自己拼接

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[,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(): 用来指定接收所有成功数据的回调函数的方法
————————————————

<script type = "text/javascript" src="./js/axios.min.js"></script>
<button id="btn1"> 点我获取所有人</button>
<button id="btn1"> 点我获取某个人</button>
<input id="person_id" type="test" placeholder="请输入一个人的id"> </input>
<button id="btn3"> 点我添加一个人</button>
<input id="person_name" type="test" placeholder="请输入名字"> </input>
<input id="person_age" type="test" placeholder="请输入年龄"> </input>
<button id="btn4"> 点我更新一个人</button>
<input id="person_update_id" type="test" placeholder="请输入id"> </input>
<input id="person_update_name" type="test" placeholder="请输入名字"> </input>
<input id="person_update_age" type="test" placeholder="请输入年龄"> </input>
<button id="btn5"> 点我删除一个人</button>
<input id="person_delete_id" type="test" placeholder="请输入闪删除的的id"> </input>
const btn1 = document.getELementById('btn1')
const btn2 = document.getELementById('btn2')
const btn3 = document.getELementById('btn3')
const btn4 = document.getELementById('btn4')
const btn4 = document.getELementById('btn4')
const btn5 = document.getELementById('btn5')
const personId = document.getElementByid('person_id')
const personName = document.getElementByid('person_name')
const personAge = document.getElementByid('person_age')
const personUpdateId = document.getElementByid('person_update_id')
const personUpdateName = document.getElementByid('person_update_name')
const personUpdateAge = document.getElementByid('person_update_age')
const personDeleteId = document.getElementByid('person_delete_id')
# 获取所有人信息-发送GET请求-不携带参数
btn1.onclick=()=>{
    # 完整版
    axios({
		url:'http://localhost:5000/test1?delay=5000',//请求地址,延迟5秒
		method:'GET',
		timeout:2000,
	}).then(
		response=>{ console.log('请求成功了！',response.data);},
		error=>{console.log('请求失败了！',error);}
	)
	# 精简版
	axios.get('http://localhost:5000/person').then(
		response=>{ console.log('请求成功了！',response.data); },error);}
	)
}
#获取某个人的信息-发送GET请求-携带query参数
btn2.onclick=()=>{
    # 完整版
    axios({
		url:'http://localhost:5000/person',
		method:'GET',
		params:{id:personId.value} 
		# 此处写的是params，但是携带的是query参数 
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
	# 精简版
	axios.get('http://localhost:5000/person',{params:{id:personId.value} }).then(
		response=>{ console.log('请求成功了！',error);}
	)
}
# 添加一个人，年龄和名字--发送POST请求--携带json编码参数或urlencoded编码
btn3.onclick=()=>{
    # 完整版
    axios({
		url:'http://localhost:5000/person',
		method:'POST',
		# 1. 携带请求体参数，json编码
		data:{name:personName.value，age:personAge} 
		
		# 2. 携带请求体参数，urlencoded编码
		data:`name=${personName.value}&age=${personAge.value}`	
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
	# 精简版
		# 1. 携带请求体参数，json编码
		axios.post('http://localhost:5000/person',
		{name:personName.value，age:personAge} ).then( 
	   # 2. 携带请求体参数，urlencoded编码
	 	axios.post('http://localhost:5000/person',
	 		`name=${personName.value}&age=${personAge.value}`).then( 
		response=>{ console.log('请求成功了！',error);}
	)
}

# 更新某个人--发送PUT请求--携带json编码参数或urlencoded编码
btn4.onclick=()=>{
    # 完整版
    axios({
		url:'http://localhost:5000/person',
		method:'PUT',
		data:{id:personUpdateId.value,
			name:personUpdateName.value,
			age:personUpdateAge.value,
		} 	
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
	# 精简版
	axios.put('http://localhost:5000/person',{id:personUpdateId.value,
			age:personUpdateAge.value}).then( 
		response=>{ console.log('请求成功了！',error);}
	)
}

# 删除某个人--发送DELETE请求--携带parmas
btn5.onclick=()=>{
    # 完整版
    axios({
		url:`http://localhost:5000/person/${personDeleteId.value}`,
		method:'DELETE',	
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
}

3.3 axios常用配置项

axios.defaults.xxx:请求的默认全局配置

<script type = "text/javascript" src="./js/axios.min.js"></script>
# 给 axios配置默认配置
axios.defaults.timeout = 2000
axios.defaults.headers = {name:atjm}
axios.defualts.baseURL='http://localhost:5000'

<button id="btn"> 点我获取所有人</button>
const btn1 = document.getELementById('btn')
btn.onclick=()=>{
    # 完整版
    axios({
		url:'http://localhost:5000/person',//请求地址, //请求方式
		//params:{a:1,b:2},//配置query
		//data:{a:3,d:3},//配置请求体 参数 (json)
		//data:'e=5&f=6' //配置请求体参数（urlencoded）
		timeout:2000, //配置超时时间
		header:{demo:123} //配置请求头
		responseType:'json' //配置相应数据格式（默认值）
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
}

3.4 axios.create方法

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

axios.create(config)

  1. 根据指定配置创建一个新的axios,也就就每个新axios都有自己的配置
  2. 新axios只是没有取消请求和批量发请求的方法,其它所有语法都是一致的
  3. 为什么要设计这个语法?
    (1)需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,
    (2)解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同要求的接口请求中
const axios2 =axios.create({
	timeout: 2000
	//headers: {name:atjm}
	baseURL:'http://localhost:5000'
})
# 需要放在defaluts前方
btn.onclick=()=>{
    # 完整版
    axios2({
		url:'http://localhost:5000/person',error);}
	)
}

3.5 axios中的拦截器

axios 请求拦截器

  1. 是什么？
    在真正发送请求前执行的一个回掉函数
  2. 作用：对所有请求做统一的处理：追加请求头、追加参数、界面loading提示等等

axios响应拦截器

  1. 是什么？
    得到相应之后执行的一组回掉函数
    2.作用：若请求成功，对成功的数据进行处理，
    若请求失败，对失败进行进一步操作

拦截器函数/ajax 请求/请求的回调函数的调用顺序
说明: 调用axios()并不是立即发送ajax 请求,而是需要经历一个较长的流程
流程: 请求拦截器2 => 请求拦截器1 => 发ajax 请求 => 响应拦截器1 => 响应拦截器2 => 请求的回调
注意: 此流程是通过 promise 串连起来的,请求拦截器传递的是config,响应拦截器传递的是response
————————————————

#请求拦截器
axios.interceptors.request.use((config)=>{
	 if(Date.Now()%2===0){
	 	config.headers.token='atuge'
	 }
	 return config;
})

# 响应拦截器
axios.interceptors.response.use(
	response=>{
		console.log('相应拦截器成功的回掉执行了',response)
		if(Date.Now()%2===0)	return response.data
		else		return '时间戳不是偶数，不能给你数据'
	},
	error=>{
		console.log('相应拦截器失败的回掉执行了')
		alert(error)
		return new Promise(()=>{})
	}
)
btn.onclick=() async() =>{
    const result =await axios.get('http://localhost:5000/person')
    console.log(result);
}

3.6 axios中取消请求

  1. 基本流程
    配置cancelToken对象
    缓存用于取消请求的cancel函数
    在后面特定时机调用cancel函数取消请求
    在错误回调中判断如果error是cancel,做相应处理
  2. 实现功能
    点击按钮,取消某个正在请求中的请求
    在请求一个接口前,取消前面一个未完成的请求

取消请求1

let cancel;
btn1.onclick=() async() =>{
    # 完整版
    axios({
		url:'http://localhost:5000/person',
		cancelToken:new CancelToken((c)=>{
			console.log(c) //c是一个函数，调用c可以关闭本次请求
			cancel=c
		})
	}).then(
		response=>{ console.log('请求成功了！',error);}
	)
}
btn2.onclick=()=>{
	cancel('任性，就是不要了')
}

取消请求2

#CancelToken 能为一次请求“打标注"
const {CancelToken,isCancel}= axios
let cancel;
btn1.onclick=() async() =>{
    if(cancel) cancel()
    axios({
		url:'http://localhost:5000/test?delay=3000',
		error=>{
			if(isCancel(error))
				console.log('用户取消了请求，原因是',error,message)
			else
				console.log('请求失败了！',error);}
	)
}
btn2.onclick=()=>{
	cancel('任性，就是不要了')
}

取消请求3 取消请求＋拦截器

#CancelToken 能为一次请求“打标注"
const {CancelToken,isCancel}= axios
let cancel;
#请求拦截器
axios.interceptors.request.use((config)=>{
	if(cancel) cancel('取消了')
	config.CancelToken = new CancelToke((c)=> cancel=c)
	return config;
})
# 响应拦截器
axios.interceptors.response.use(
	response=>{ return response.data },
	error=>{
		if(isCancel(error)) 
			console.log('用户取消了请求，原因是',error.message)
		else
			console.log('失败了',error)
		return new Promise(()=>{})
	}
)
btn1.onclick=() async() =>{
    const result= await axios.get('http://localhost:5000/test?delay=3000')
	
}
btn2.onclick=()=>{
	cancel('任性，就是不要了')
}

3.7 axios批量发请求

btn1.onclick=() async() =>{
   axios.all([
   	  axios.get('http://localhost:5000/test'),
   	  axios.get('http://localhost:5000/test2?delay=3000'),
   	  axios.get('http://localhost:5000/test3')
   ]).then(
		response=>{ console.log('请求成功了！',error);}
	)
}

相关文章

ajax怎么解析一段json
AJAX是一种基于JavaScript和XML的技术，能够使网页实现异步交...
ajax怎么把json拿出来
在网页开发中，我们常常需要通过Ajax从后端获取数据并在页面...
ajax怎么循环json对象数组
在前端开发中，经常需要循环JSON对象数组进行数据操作。使用...
ajax怎么从c 后台读取json
AJAX（Asynchronous JavaScript and XML）是一种用于创建 We...
ajax怎么传递json数据
AJAX技术被广泛应用于现代Web开发，它可以在无需重新加载页面...
ajax怎么删除json数据库
Ajax是一种通过JavaScript和HTTP请求交互的技术，可以实现无...