前端框架学习之Vue 3.前后端交互(promise,fetch,axios，async/await)_vue3 fetch

1.前后端交互模式

接口调用方式

·原生ajax
·基于jQuery的ajax
·fetch
·axios
1
2
3
4

2.Promise用法

异步编程效果分析

定时任务
ajax
事件函数
1
2
3

多次异步调用的依赖分析

·多次异步结果不确定性，不能依赖执行顺序
·对异步结果有依赖的，需要用嵌套形式
1
2

promise是异步编程的一种解决方案，promise是一个对象，它可以获取异步操作的消息。

使用promise的好处

·可以避免多次异步调用嵌套问题
·promise对象提供了简洁的API，使得控制异步更加容易
1
2

promise的基本用法

·实例化promise对象，构造函数中船队函数，该函数中用于处理异步任务
·resolve,reject两个参数用于处理成功和失败的两种情况，并通过p.then获取处理结果。

			var p =new Promise(function(resolve,reject)){
				//成功时调用resolve，失败时调用reject
			};
			p.then(function(ret){
				//从resolve得到正常结果
			},function(ret){
				//从reject得到错误信息
			})
1
2
3
4
5
6
7
8
9
10
11

eg

			var p =new Promise(function(resolve,reject){
				//成功时调用resolve，失败时调用reject
				//这里实现异步任务
				setTimeout(function(){
					var flag=false;
					if (flag){
						//正常情况，
						resolve('hello');
					}else{
						reject('error');
					}
				},100)
			});
			p.then(function(data){
				//从resolve得到正常结果
				console.log(data);
			},function(ret){
				//从reject得到错误信息
				console.log(ret);
			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

基于promise处理ajax请求
处理原生ajax

			function queryData(url){
				var p1 = new Promise(function(resolve,reject){
					var xhr = new XMLHttpRequest();
					xhr.onreadystatechange=function(){
						//不止会变化一次
						if(xhr.readyState!=4) return;
						if(xhr.readyState==4&&xhr.status==200){
							//处理正常的情况
							resolve(xhr.responseText);
						}else{
							reject('服务器错误');
						}
					};
					xhr.open('get',url);
					xhr.send(null);
				})
				return p1;
			}
			queryData('http://www.baidu.com').then(function(data){
				console.log(data);
			},function(ret){
				console.log(ret);
			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

发送多次请求，简化处理流程，上一个的返回直接.then来接收，return的其实是一个新的Promise对象

		queryData('http://www.baidu.com')
			.then(function(data){
				console.log(data)
				return queryData('https://localhost:8000/login');
			}).then(function(data){
				console.log(data.login.res)
				return queryData('https://localhost:8000/queryinfo');
			}).then(function(data){
				....
			})
1
2
3
4
5
6
7
8
9
10

then参数中的函数返回值

1、返回promise对象
·返回的该实例对象会调用下一个then

2、返回普通值
·返回的普通值会直接传递给下一个then，通过then参数中的函数的参数接收该值。
返回普通值时会创建一个默认的promise，从而保证下一个then可以正常执行，只是不需要用户创建而已。
queryData('https://www.baidu.com')
			.then(function(data){
				// console.log(data)
				return queryData('http://localhost:8000/login');
			}).then(function(data){
				// console.log(data.login.res)
				return new Promise(function(resolve,reject){
					setTimeout(function(){
						resolve('123');
					},1000)
					reject('234');
				})
			}).then(function(data){
				console.log(data);
				return 'hello';
			}).then(function(data){
				console.log(data);
		})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Promise常用api

1.实例方法
	p.then() 得到异步任务的正确结果
	p.catch() 获取异常信息
	p.finally() 成功与否都会执行（尚且不是正确标准）
1
2
3
4

queryData('https://www.baidu.com')
.then(function(data){
	console.log(data)
})
.catch(function(data){
	console.log(data)
})
.finally(function(){
	console.log('finished')
})
1
2
3
4
5
6
7
8
9
10

2.对象方法
Promise.all()   并发处理多个异步任务，所有任务都执行完成才能得到结果。
Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果。
1
2
3

			var p1=queryData('http://localhost:8000/p1');
			var p2=queryData('http://localhost:8000/p2');
			var p2=queryData('http://localhost:8000/p3');
			Promise.all([p1,p2,p3]).then(function(data){
				console.log(data); //返回结果为一个数组，结果和传参顺序对应
			})
			Promise.race([p1,p2,p3]).then(function(data){
				console.log(data); //只响应最先返回的结果，后面的结果不管
			})
1
2
3
4
5
6
7
8
9

4.fecth用法

fetch基本特性

更加简单的数据获取方式，功能更加强大，更灵活，可以看作是xhr的升级版
基于Promise实现
1
2

fetch语法结构

fetch(url).then(fn2)
		.then(fn3)
		.then(fn4)
		...
		.catch(fn)
1
2
3
4
5

fetch的基本用法

fetch('/abc').then(data=>{
	return data.text()
}).then(ret=>{
	console.log(ret);//这里的才是最终结果
})
1
2
3
4
5

fetch('http://localhost:8000/fdata').then(data=>{
				//text()属于fetchAPI的一部分，返回一个Promise实例对象，用于获取后台返回的数据
				return data.text()
			}).then(res=>{
				console.log(res);
			})
1
2
3
4
5
6

fetch请求参数

1.常用配置项
·method(String) Http请求方式 默认为GET(GET、POST、PUT、DELETE)
body(String) HTTP的请求参数
headers(Object) HTTP的请求头 默认为{}
1
2
3
4

get请求的参数传递，delete请求参数与get一致

fetch('http://localhost:8000/fdata?id=3').then(data=>{
				return data.text()
			}).then(res=>{
				console.log(res);
			})
----------------------------------------
//需要更改后台接口 restful风格
			fetch('http://localhost:8000/fdata/123',{
				method:'GET',  //或者delete
			}).then(data=>{
				return data.text()
			}).then(res=>{
				console.log(res);
			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

POST请求方式的传递  PUT请求和POST类似

var reqBody={
				"username":"Lvan",
				"age":"18"
			};
fetch('http://localhost:8000/updateInfo',{
				method:'POST',
				body:JSON.stringify(reqBody), // username="Lvan"&age=18 表单类型时
				headers:{
					'content-type':'application/json'
				}
			}).then(data=>{
				return data.text()
			}).then(res=>{
				console.log(res);
			})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

fetch响应结果
响应数据格式

text():将返回体处理成字符串类型
json():将返回体处理成json类型数据
1
2

5.axios用法

是一个基于Promise用于浏览器和node.js的HTTP客户端
特征：

·支持浏览器的node.js
·支持promise
·能拦截和请求和响应
·自动转换json数据
1
2
3
4

axios的基本用法

axios.get('/data').then(res={
	console.log(res.data)//data属性名称是固定的，用于获取后台响应的数据
})
1
2
3

axios的常用API

get 查询
post 添加
put 更新
delete 删除
1
2
3
4

get传递参数  delete方法类似

·直接通过url拼接字符串

·通过restfull形式的方式传参
axios.get('/abc/123').then(res=>{
	console.log(res.data)
})
·通过params传递
axios.get('/abc',{
	params:{
		id:''
	}
}).then(res=>{
	console.log(res.data)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

POST方式传参 PUT类似

//默认为json格式的数据
axios.post('/abc',{
	id:'123',
	pwd:'123456'
}).then(res=>{
	console.log(res.data)
})

//传递表单形式
const param=new URLSearchParams();
params.append('id','123');
params.append('pwd','123456');
axios.post('/abc',params).then(res=>{
	console.log(res.data)
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

axios的响应结果

data: 响应的数据
headers: 响应头信息
status: 响应状态码
statusText:响应状态信息
1
2
3
4

axios的全局配置

axios.defaults.timeout=3000 //超时时间
axios.defaults.baseURL ='http://localhost:3000/app' //默认地址
axios.defaults.headers['mytoken'] ='asdklashdlsakdlas' //header信息
1
2
3

axios拦截器
请求拦截器：发出请求之前设置一些信息

axios.interceptors.request.use(function(config){
				console.log(config.url)
				config.headers.mytoken='aisdhoashdaklhfas';
			},function(err){
				console.log('error');
			})
			axios.get('/abc').then(res=>{
				console.log(res.data);
			})
1
2
3
4
5
6
7
8
9

响应拦截器：响应返回后经过响应拦截器才能被客户端使用

axios.interceptors.response.use(function(res){
				return res;
			},function(err){
				console.log('error');
			})
			axios.get('/abc').then(res=>{
				console.log(res.data);
			})
可以在响应拦截器中获取到res.data直接返回。
1
2
3
4
5
6
7
8
9

6.async/await的用法

· async/await 是ES7引入的新语法，可以更加方便的进行异步操作
· async关键字用于函数上（async函数的返回值是Promise实例对象）
· await 关键字用于async函数当中（await可以得到异步的结果）
1
2
3

async function queryData(id){
	cont res= await axios.get('/data'); //get返回的是一个promise对象
	return res;
}
queryData.then(res={
	console.log(res);
})




-----------------------------
async function queryData(id){
	cont res= await new Promise(function(resole,reject){
		setTimeout(function(){
			resolve('right');
		},1000);
		reject('error');
	})
	return res;
}
queryData.then(res={
	console.log(res);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

async/await处理多个异步请求

		async function queryData(id) {
				//按顺序的写await请求
				var res = await axios.get('/ab',id);
				var res1 = await axios.get('/cd', info.data.id)
				return res1.data;
			}
			queryData(1).then(res={
				console.log(res)
			})
1
2
3
4
5
6
7
8
9