Vue前后端交互

前后端交互模式

接口调用方式

传统形式的URL

Restful形式的URL

前后端的交互模式主要是：前端通过ajax调用一个url地址，后台通过这个地址返回对应的数据，前端进行数据的渲染。

异步调用

异步效果分析：

1. 定时任务
2. Ajax
3. 事件函数
   多次异步调用的依赖分析
   因为Ajax属于异步编程，所以它得到的结果的顺序是不确定的，所以如果要想得到有顺序的返回结果就需要嵌套。但是如果一直往里面嵌套就会很复杂，一环套一环，这时这种现象，我们可以叫做回调地狱。
   通过回调函数一直往里嵌套，这种叫做 回调地狱
   

Promise

Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象（也是一个函数），从它可以获取异步操作的消息。
好处：可以避免多层异步调用嵌套问题（回调地狱）
Promise对象提供了简洁的API，使得控制异步操作更加容易
Promise基本用法：
实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

var p = new Promise(function (resolve, reject) {
			//这里用于实现异步任务
			setTimeout(function () {
				var flag = false;
				if (flag) {
					//正常情况
					resolve('hello');
				} else {
					//异常情况
					reject('error');
				}
			}, 100);
		});
		p.then(function (data) {
			console.log(data);
		}, function (info) {	
			console.log(info);
		});

基于Promise处理Ajax请求

发送多次ajax请求

回调地狱

这种写法 代替回调地狱

then参数中的函数返回值

1. 返回Promise实例对象
   
2. 返回普通值
   

promise常用的API

1. 实例方法
   

function foo () {
			return new Promise(function (resolve, reject){
				setTimeout(function() {
					// resolve(123);
					reject(234);
				}, 100);
			})
			}
			foo()
				.then(function(data){
					console.log(data);	
				})
				.catch(function(data){
					console.log(data);
				})
				.finally(function(){
					console.log('finally');
				})
		

2. 对象方法
   
3. 

fetch方法是基于Promise对象的（调用接口方法）

基本特性
更加简单的数据获取方式，功能更强大，更灵活，可以看做是xhr(ajax)的升级版
基于Promise实现
语法结构


text()是fetch API中的一部分，它返回的是一个Promise对实例象，用于获取后台返回的数据，需要通过下一个then得到数据
fetch请求参数


delete请求方式的参数传递

post请求方式的参数传递

put请求方式的参数传递
一般用于修改数据

响应数据格式
text(): 将返回体处理成字符串类型
json()：将返回结果和JSON.parse(responseText)一样