回调地狱和跨域

一.回调函数

概念:将一个函数当做参数传入另一个函数的时候，这个函数就叫回调函数。

二.回调地狱

回调地狱是有多个异步代码需要按照一定的顺序执行时就需要有多个回调函数嵌套在一起,就造成"回调地狱".Es6为了解决这个问题所以新增了promise语法

三.promise语法

es6提供的promise是一个构造函数,实例化的时候需要传递一个函数..

语法:  var p=new Promise(()=>{})

promise对象共有三种状态

pending - 正在处理中

fulfilled - 成功的

rejected - 失败的

传递进去的回调函数,在promise构造函数内部调用的时候,给传递了两个形参,分别是:resolve和reject.这两个参数都是函数.

resolve和reject不会同时执行,因为promise的状态,从pending到成功或失败就已经结束了,不会再次发生改变了.如果要用成功或失败的值做进一步的操作，正常是需要在回调函数中进行的，但promise的出现的目的就是为了解决嵌套的，所以promise对象提供了两个方法，分别是then和catch。

   在回调函数内部调用resolve，可以通过调用promise对象的then方法获取到成功的值；

   在回调函数内部调用reject，可以通过调用promise对象的catch方法获取到失败的值

如果嵌套实在很多，我们用promise语法后，发现语法变得更复杂，且嵌套问题解决的不彻底，promise基于这种嵌套较多的情况，提供了链式调用：当第一个promise的then方法中返回第二个promise对象，则第二个promise的then方法可以跟第一个promise对象的then方法形成链式操作\\

promise 的then方法和catch方法是异步代码

四.ASYNC/AWAIT

promise虽然将嵌套结构变成了链式结构,但将所有代码作为一个整体,更不利于后期代码的维护

所以在es7中,新增了async/await语法,彻底解决了回调地狱,号称回调地狱的终极解决方案.

async/await语法中其实就是两个关键字:async和await.

1.   async用于修饰一个函数:单独使用跟正常的函数没什么区别,但会隐形返回一个状态为成功的promise对象,成功值默认认为undefined,若要改变,需要在函数中返回内容

2.   await无法单独使用,必须在async修饰的函数内部使用,用于修饰一个promise对象.

作用是让后续的代码,等待promise有了成功的结果后在执行,无论promise中执行的是同步代码还是异步代码:            await还可以将修饰的promise对象的成功结果接收到:

五.跨域

1.跨域介绍

我们在前后端分离开发模式下，前端和后端同时开发，前端项目需要通过服务器打开，后端接口也是一个服务器。

我们直接在前端项目通过ajax请求到后端的接口，是不能成功的。

浏览器为了安全，对前端的ajax请求进行了限制 - 同源策略。

同源策略：前端ajax所在页面地址跟被请求的服务器地址，需要同源才可以请求成功，否则浏览器不允许请求成功。

同源：同协议且同域名且同端口号，三者只要有一个不同，就是不同源，也就是造成了跨域。

若非要进行跨域，需要使用特殊的解决办法：proxy、cors、jsonp

2.proxy

proxy俗称服务器代理.

解决原理：浏览器能限制客户端的ajax，但是无法限制服务器。前端ajax将请求发送到自己所在服务器中，服务器代替ajax请求目标服务器，将请求回来的数据响应给前端ajax。

在nodejs中服务器中，实现proxy服务器代理需要依赖第三方模块 - http-proxy-middleware

3.cors

浏览器之所以不让前端ajax跨域成功，是因为他不知道目标服务器是否允许不同源的地址请求。如果目标服务器摆明了允许不同源的地址请求，浏览器也没有借口继续拦截。

cors跨域解决办法就是在目标服务器中设置允许不同源地址跨域请求的响应头。

4.jsonp

浏览器会限制前端ajax，但前端的标签浏览器是不做限制的。例如：img引入其他服务器的图片地址、link引入其他服务器的css文件地址、script引入其他服务器的js文件地址、iframe引入其他页面地址。

jsonp跨域的原理，就是利用script标签发送请求，不受浏览器限制。

六.事件循环

Event Loop 

事件循环，指的是js执行同步代码和异步代码的流程。

js代码都在js主线程（调用栈）中执行，同步代码直接执行了，异步代码交给浏览器的webAPI处理了，同步执行和异步处理是同时进行的。

webAPI在处理异步的时候，会将异步代码分为两种：宏任务和微任务。

宏任务包括：定时器

微任务包括：promise的then

因为异步代码有两种，所以异步代码待到要执行的时机时，放任务的队列也分为两种：宏队列和微队列。

js调用栈将所有同步代码执行结束后，会交替清空微队列和宏队列，不停的交替下去，所以叫做事件循环。