Js(二) 从es5（callback）到es6（promise）回调函数的变化以及应用理解

回调函数的变化以及应用理解"/>

Js(二) 从es5（callback）到es6（promise）回调函数的变化以及应用理解

在说清楚如何写回调函数的时候，首先我觉得应该说清楚，什么是回调，为什么会产生回调，回调的应用场景。
大多数的回调场景发生在加载资源这一块，比如加载script，加载图片，再比如从后端请求回数据，然后对请求回来的数据分析。又比如script，图片加载失败，这个时候我们要清楚，要做出一个最基本的提示。
如果这个时候有一些不太了解浏览器加载的人会有如下的疑惑

let data = function() {// 加载数据 ...
}if(data) {// 加载成功
} else {// 加载失败
}

这里我不多做解释，就简单说明一下，浏览器遇到异步加载的会放到异步队列中，优先加载同步队列，同步队列结束后，在回来处理异步队列。如果想要更详细的说明，可以留言，哪怕只有一人留言，我也会写一篇浏览器加载的数据先后顺序的文章。

回调地狱

既然已经说清楚回调的应用场景，也体现了回调的重要性，接下来就说明一下回调函数如何写。在ES5的时候是如下的

// 加载script资源
function loadScript (src, callback) {let script = document.createElement('script')script.src = srcscript.onload = () => { callback(src) }document.head.append(script)
}
function test () {console.log('test')
}
// 第一种理解
loadScript（'./scriptTest.js', test）
// 第二种理解
loadScript('./scriptTest.js', function (arg) {console.log('回调完成')
})

上述的理解
首先执行的 loadScript（’./scriptTest.js’, test） ，为什么呢？之前已经说过了，异步队列的执行。 接着就进入到loadScript 函数中了 ，当资源加载完后，就执行callback语句（实则是函数），，也就是目前的test函数。这样一个简单的回调就完成了。

接着再说明一下第二个内容
首先执行的loadScript(’./scriptTest.js’, function (arg) {
console.log(‘回调完成’)
}) ，
接着就进入到loadScript 函数中了 ，当资源加载完后，就执行callback语句（实则是函数）但是这个callback函数还返回一个自己这个函数中的参数，并将这个函数参数返还给function，这个函数就是后续的操作的关键，这个参数可以将前者的调用情况返回，这样后续就可以根据该返回情况，做出不同的响应

Promise

为了解决ES5在解决回调的时候造成的回调地狱的情况，ES6提出了新的解决方法 Promise
如下显示：

function loadScript() {return new Promise((reslove,reject)=> {// 正确执行的时候返回...resolve（）// 错误执行的时候返回...reject（error）})
}// 调用Promise
loadScript('./scriptTest.js').thne(()=> {console.log('执行正确')},(err)=> {console,log('执行错误'+ err)})

而要明白Promise的时候就要明白primise的执行过程
我们在new 一个新的Promise的时候。promise本身是带有两个参数的，分别是

state => pending
result => undefined

当执行resolve的时候，状态改变如下

state =>  fulfilled
result => '当前传进来的值'

执行reject的时候，状态改变如下

state =>  rejected
result =>  error

以上就是Promise在工作时候的状态改变

而在 .then的工作原理，我们要有这样一个前提
.then是promise原型上的方法，也就是说必须promise才能调用then
所以说，如果你在then的连续上的话，就需要对结果return一下（也就是将当前的promise对象返给下一个对象接收）

Promise方法

我们在编程中经常回遇到的类型 转换。Promise也为我们提供了两个类型转换方法，如下：

Promise.resolve(13)
Promise.reject(13)

并行异步操作

const p1 = Promise.resolve('我')
const p2 = Promise.resolve('你')
const p3 = Promise.resolve('他')
Promise.all([p1, p2, p3]).then((value)=> {} )

两资源竞争加载

const p1 = () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(1)}, 0)})
}
const p2 = () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(2)}, 10000)})
}
Promise.race([p1(), p2()]).then(value => {console.log(value)
})