JavaScript异步实战

JavaScript异步系列的篇章到今天为止已经完结了,从回调函数 => Promise => Generator => async,现在呢我们再用同一个例子，分别用这几种异步方法来实现，自己比较下异步技术哪家强

准备工作

我们先准备好四个接口,

四个接口的返回的数据分别为 ：

刘家军起床了!
刘家军上班了!
刘家军下班了!
刘家军睡觉了!

我们要实现的顺序就是 起床 => 上班 => 下班 => 睡觉

回调函数

 function ajax(url, sucessC) {
	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
}
// 回调函数
function getUp(callback) {
	ajax('asynctest1', res => {
		console.log(res.data.data) 
		callback && typeof callback == 'function' && callback()
	})
}
function goToWork(callback) {
	ajax('asynctest2', res => {
		console.log(res.data.data) 
		callback && typeof callback == 'function' && callback()
	})
}
function offWork(callback) {
	ajax('asynctest3', res => {
		console.log(res.data.data) 
		callback && typeof callback == 'function' && callback()
	})
}
function sleep() {
	ajax('asynctest4', res => {
		console.log(res.data.data)
	})
}
getUp(() => {
	goToWork(() => {
		offWork(() => {
			sleep()
		})
	})
})

我们可以看出 当层级再多时 ，就形成了所谓的回调地狱，而且代码不易维护
下面我们用Promise再写一遍

Peomise

  function ajax(url, sucessC) {
 	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
 }
 // promise
 function getUp() {
 	return new Promise(resolve => {
 		ajax('asynctest1', res => {
 			resolve(res.data.data)
 		})
 	})
 }

 function goToWork() {
 	return new Promise(resolve => {
 		ajax('asynctest2', res => {
 			resolve(res.data.data)
 		})
 	})
 }

 function offWork() {
 	return new Promise(resolve => {
 		ajax('asynctest3', res => {
 			resolve(res.data.data)
 		})
 	})
 }

 function sleep() {
 	return new Promise(resolve => {
 		ajax('asynctest4', res => {
 			resolve(res.data.data)
 		})
 	})
 }
 getUp().then(res => {
 	console.log(res)
 	return goToWork()
 }).then(res => {
 	console.log(res)
 	return offWork()
 }).then(res => {
 	console.log(res)
 	return sleep()
 }).then(res => {
 	console.log(res)
 })

Promise是链式调用，虽然看起来更浅显易懂，但是还是没有避免大量的嵌套，接着我们看下Generator生成器函数

Generator生成器函数

  function ajax(url, sucessC) {
 	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
 }
// Generator
 function getUp() {
 	ajax('asynctest1', res => {
 		console.log(res.data.data)
 		day.next()
 	})
 }

 function goToWork() {
 	ajax('asynctest2', res => {
 		console.log(res.data.data)
 		day.next()
 	})
 }

 function offWork() {
 	ajax('asynctest3', res => {
 		console.log(res.data.data)
 		day.next()
 	})
 }

 function sleep() {
 	ajax('asynctest4', res => {
 		console.log(res.data.data)
 	})
 }

 function *generator() {
 	yield getUp()
 	yield goToWork()
 	yield offWork()
 	yield sleep()

 }
 let day = generator()

 day.next() // 启动生成器

一般很少有人会通过Generator实现多个异步同步执行，接下来就是我们昨天讲的async

async

function getUp() {
      return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest1').then(res => {
          console.log(res.data.data)
      })
  }

  function goToWork() {
      return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest2').then(res => {
          console.log(res.data.data)
      })
  }

  function offWork() {
      return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest3').then(res => {
          console.log(res.data.data)
      })
  }

  function sleep() {
      return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest4').then(res => {
          console.log(res.data.data)
      })
  }
    async function day() {
      await getUp()
      await goToWork()
      await offWork()
      await sleep()
  }

  day()

因为axios返回的是个Promise，Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果
以上几个例子都是都是输出：

我们说起异步，之前首先想到的是回调函数，但是回调函数存在各种问题， ES6中出现了Promise，解决了回调函数问题，Promise中我们又介绍了几个常用的API
Promise.then()、Promise.catch()、Promise.all()、Promise.race()、Promise.finally()
我们后来又介绍了Generator，通过Generator引出了async await，
async就是Generator的语法糖，简化了Generator的使用方法
async无法取代Promise，async的使用依赖于Promise
有人说async await是处理异步的终极方案，这个说法有些极端
处理异步的方法我们介绍很多，没有最好的，只有最合适的
会的多了，选择也就多了，代码质量自然就会高
所以，这几种异步的处理方式我们都要学会
关于JS异步系列的讲解，就介绍到这里了，如果还有什么不了解的就多回顾我之前的篇章

友情链接：点击查看所有文章目录

友情链接：点击查看　JavaScript异步系列文章目录