VUE基础学习笔记——04前后端交互

一、URL 地址格式

1、传统形式的 URL

• 格式：schema://host:port/path?query#fragment
  (1) schema：协议（http、https、ftp等）
  (2) host：域名或IP地址
  (3) port：端口，http 默认端口80，可以省略
  (4) path：路径
  (5) query：查询参数。例如 uname=lisi&age=12
  (6) fragment：锚点（哈希Hash）用于定位页面的某个位置

2、Restful 形式的 URL

• HTTP请求方式

  GET 查询
  POST 添加
  PUT 修改
  DELETE 删除

二、Promise 用法

1、异步调用

• 异步效果分析：定时任务、Ajax、事件函数

• 多次异步调用的依赖分析
  （1）多次异步调用的结果顺序不确定
  （2）异步调用结果如果存在依赖需要嵌套

2、Promise 概述

MDN文档-Promise

Promise 是异步编程的一种解决方案，从语法上讲，Promise 是一个对象，从它可以获取异步操作的消息

使用 Promise

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise 对象提供了简洁的API，使得控制异步操作更加容易

3、Promise 基本用法

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

var p = new Promise(function(resolve,reject){
	//成功时调用 resolve()
	//失败时调用 reject()
});
p.then(function(ret){
	//从resolve得到正常结果
}，function(ret){
	//从reject得到错误信息
})



var p = new Promise(function(resolve,reject){
	setTimeout(function(){
		var flag = true;	//或flag = false
		if(flag){
			resolve('right');	//正常
		}else{
			reject('error');	//异常
		}
	},1000);
});
p.then(function(data){
	console.log(data);	//从resolve得到正常结果
}，function(ret){
	console.log(ret);	//从reject得到错误信息
})

4、基于 Promise 处理Ajax请求

4.1、处理原生Ajax

function queryData(){
	return new Promise(function(resolve,reject){
		var xhr = new XMLHttpRequest();
		xhr.onreadystatechange = function(){
			if(xhr.readyState != 4)return;
			if(xhr.state == 200){
				resolve(xhr.responseText)
			}else{
				reject('出错了')；
			}
		}
		xhr.open('get','/data');
		xhr.send(null);
	})
}

//发送多个ajax请求并且保证顺序
queryData('urc1').then(function(data){
	console.log(data);
	return queryData('urc2');
}).then(function(data){
	console.log(data);
	return queryData('urc3');
}).then(function(data){
	console.log(data);
});

5、then 参数中的函数返回值

5.1、返回 Promise实例对象
返回的实例对象会调用下一个then
5.2、返回 普通值
返回的普通值会直接传递给下一个 then，通过then参数中函数的参数接收该值

6、Promise 常用的API

6.1、实例方法

• .then() 得到异步任务的正确结果
• .catch() 获取异常信息
• .finally() 成功与否都会执行

quetyData()
.then(function(data){
	console.log(data);
})
.catch(function(data){
	console.log(data);
})
.finally(function(){
	console.log('finished');
});

6.2、对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完毕才能得到结果
• Promise.race() 并发处理多个异步任务，只要有一个任务完成就能得到结果

var p1 = queryData('urc1');
var p2 = queryData('urc2');
var p3 = queryData('urc3');

Promise.all([p1,p2,p3]).then((result) => {
	console.log(result)
})

Promise.race([p1,p2,p3]).then((result) => {
	console.log(result)
})

三、接口调用 - fetch用法

1、fetch 概述

MDN文档-Fetch API

1.1、基本特性

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

1.2、语法结构

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

2、基本用法

fetch('urc').then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

3、fetch 请求参数

3.1、常用配置选项

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

fetch('urc',{
	method:'get'
}).then(data=>{
	return data.text();
}).then(ret=>{
	console.log(ret);
});

3.2、GET 请求方式的参数传递

fetch('urc?id=123',{	//传统的URL传递参数id=123
	method:'get'
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

fetch('urc/123',{	//Restful形式的URL传递参数
	method:'get'
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

3.3、DELETE 请求方式的参数传递

fetch('urc/123',{
	method:'delete'
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

3.4、 POST 请求方式的参数传递

fetch('urc',{
	method:'post',
	body:'uname=lisi&pwd=123',	//参数传递lisi 123
	headers:{
		'Content-Type':'application/x-www-form-urlencoded',
	}
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

fetch('urc',{
	method:'post',
	body:JSON.stringify({
		umane:'lisi',
		age:12
	})
	headers:{
		'Content-Type':'application/json',
	}
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

3.5、 PUT 请求方式的参数传递

fetch('urc/123',{	//传递参数123
	method:'put',
	body:JSON.stringify({	
		umane:'lisi',	//传递参数lisi
		age:12			//传递参数12
	})
	headers:{
		'Content-Type':'application/json',
	}
}).then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

4、fetch 响应结果

响应数据格式

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

fetch('urc').then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

fetch('urc').then(data => {
	return data.json();
}).then(ret => {
	console.log(ret);	//这里得到的才是最终的数据
})；

fetch('urc').then(data => {
	return data.json();
}).then(ret => {
	console.log(ret.key);	//这里得到的才是最终的数据
})；

fetch('urc').then(data => {
	return data.text();	//text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
}).then(ret => {
	var obj = JSON.parse(ret);
	console.log(obj);	//这里得到的才是最终的数据
	console.log(obj.key);
})；

四、接口调用 - axios用法

1、axios 的基本特性

官网
axios是一个基于Promise用于浏览器和node.js的HTTP客户端。

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

2、axios 的基本用法

<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
	axios.get('src').then(ret=>{
	console.log(ret.data)	//data属性名称是固定的，用于获取后台响应的数据
})
</script>

3、axios 的参数传递

3.1、GET 传递参数

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

axios.get('/abc?id=123').then(ret=>{
	console.log(ret.data)
})

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

axios.get('/abc',{
	params:{
		id:123
	}
}).then(ret=>{
	console.log(ret.data)
})

3.2、DELETE 传递参数

axios.delete('/abc?id=123').then(ret=>{
	console.log(ret.data)
})

axios.delete('/abc/123').then(ret=>{
	console.log(ret.data)
})

axios.delete('/abc',{
	params:{
		id:123
	}
}).then(ret=>{
	console.log(ret.data)
})

3.3、POST 传递参数

• 通过选项传递参数（默认传递的 json格式的数据）

axios.post('/abc',{
	uname:'lisi',
	pwd:123
}).then(ret=>{
	console.log(ret.data)
})

• 通过 URLSearchParams 传递参数（application/x-www-form-urlencoded）

const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('src',params).then(ret=>{
	console.log(ret.data)
})

3.4、PUT 传递参数

axios.put('/abc',{
	uname:'lisi',
	pwd:123
}).then(ret=>{
	console.log(ret.data)
})

4、axios 的响应结果

响应结果的主要属性

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

5、axios 的全局配置

• axios.defaults.timeout = 3000; //超时时间
• axios.defaults.baseURL = ‘src’ //默认地址
• axios.defaults.headers[‘mytoken’] = ‘str’ //设置请求头

axios.get('http://abc/axios-json').then(function(ret){
	console.log(ret.data.uname)
})

axios.default.baseURL = 'http://abc/';	//配置基准URL地址
axios.get('axios-json').then(function(ret){
	console.log(ret.data.uname)
})

6、axios 拦截器

6.1、请求拦截器

在请求发出之前设置一些信息

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
	//在请求发出之前进行一些信息设置
	return config;
},function(error){
	//处理响应的错误信息
})；

6.2、响应拦截器

在获取响应数据前对响应数据做一些加工处理

//添加一个响应拦截器
axios.interceptors.response.use(function(res){
	//在这里对返回的数据做一些处理
	return res;
},function(error){
	//处理响应的错误信息
})

五、接口调用 - async/await 用法

1、async/await 的基本用法

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

async function queryData(id){
	const ret = await axios.get('src');
	return ret;
}
queryData.then(ret=>{
	console.log(ret)
})

2、async/await 处理多个异步请求

async function queryData(id){
	const info = await axios.get{'/async1'};
	const ret = await axios.get('async2?info='+info.data);
	return ret;
}
queryData.then(ret=>{
	console.log(ret)
})