vue前后端交互

接口调用方式

一、promise

1.优点

• 可以避免多层嵌套问题（回调地狱）
• API简洁，异步操作更加容易

2.异步编程

js里面的异步编程有：

1. 定时任务
2. Ajax
3. 事件函数

二、fetch

1.特性

• 更加简单的数据获取方式、功能更加强大、更灵活
• 基于promise实现

2.语法结构

fetch(url).then(fn2)
		  .then(fn3)
		  ...
		  .then(fn)

//例子
feth('/abc').then((data)=>{
//text是fetch提供的API返回一个promise实例对象，用于获取后台返回的数据
	return data.text(); 
}).then((ret)=>{
	//这里才是最终数据
	console.log(ret);
})

3.fetch使用

1.常用配置选项

• method(String)：http请求方法，默认为GET（GET、POST、PUT、DELETE）
• body(String)：http的请求参数
• headers(Object)：http的请求头，默认为{}

2.代码形式

get 和delete方式请求

fetch('/abc',{
	method: 'get' //也可以是delete
}).then(data=>{
	return data.text;
}).then(ret=>{
//最终数据
	cosole.log(ret);
})

post(put 和post类似)

fetch('/abc',{
	method: 'post'，
	//参数之间用&隔开
	body:'uname=lisi&pwd=123',
	/*如果是json格式
	body:JSON.stringify({
		"name": "张三"，
		"pwd": "123"
	 })*/
	//请求头是必须的，不可省略
	headers:{
		//内容类型 值基本固定
		//值也可以是 application/json
		'Content-Type':'application/x-www-from-urlencoded',
	} 
}).then(data=>{
	return data.text;
}).then(ret=>{
//最终数据
	cosole.log(ret);
})

4.fetch响应结果

• text()：将返回体处理成字符串类型
• json()：返回结果和json.parse(responseText)一样

feth('/abc').then((data)=>{
//返回json形式的数据
//json返回的是一个对象
	return data.json(); 
}).then((ret)=>{
	//这里才是最终数据
	console.log(ret);
})

三、axios

1.基本特性

是一个基于Promise用于浏览器和node.js的http客户端

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换json数据

2.基本用法

axios.get('/abc').then(ret=>{
	//data属性名称是固定的 用于获取后台响应的数据
	console.log(ret.data);
})

3.常用API

• get：查询数据
• post：添加数据
• put：修改数据
• delete：删除数据

4.参数传递

1.get方法传递参数

• 通过URL传递参数
• 通过params选项传递参数

//通过url传递参数
axios.get('/adata?id=123')
	.then(ret=>{
		console.log(ret.data);
	})

axios.get('/adata/123')
	.then(ret=>{
		console.log(ret.data);
	})

//通过params选项传递参数
axios.get('/adata'，{
	params:{
		id: 123
	}
}).then(ret=>{
		console.log(ret.data);
	})

delete方式与get方式传参类似

2.post方式传递参数

默认传递的是json形式的数据

axios.get('/adata'，{
	uname:"tom",
	pwd: 123
}).then(ret=>{
		console.log(ret.data);
	})

通过URLSearchParams传递参数

const params=new URLSearchParams();
params.add('params1','value1');
params.add('params2','value2');
axios.get('/api/test',params).then(ret=>{
	colsole.log(ret.data)
})

put请求和post类似

5.相应结果

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码，200为正常
• statusText：响应状态信息
  

四、axios拦截器

1.请求拦截器

添加一个拦截器

axios.interceptors.request.use(config=>{
	//所做的配置
	config.headers.mytoken='nihao';
	consle.log(config.url);
	//一定将config返回出去
	return config;
},err=>{
	//处理响应的错误信息
})

2.响应拦截器

在获取数据之前对数据进行加工处理

axios.interceptors.response.use(res=>{
	//在这里对数据进行处理
	//res是返回的对象
	const data=res.data;
	return data;
},err=>{
	//处理响应的错误信息
})

注： 本篇作为个人笔记。同时希望能够帮到看见这篇文章的朋友。