JS基础对异步的理解，什么是异步，异步的使用场景（面试必考）

前言

关于异步这一块的内容，基本是前端的必考知识，这篇文章来讲讲基础的异步理解，从js单线程的特性理解异步的出现以及promise基础的使用方法，希望能对大家有所帮助

单线程和异步

JS是单线程语言，只能同时做一件事儿
浏览器和nodejs已支持JS启动进程，如Web Worker
JS和DOM渲染共用同一个线程，因为JS可修改DOM结构

因为在遇到等待（网络请求，定时任务）的时候不能卡住，所以就需要异步，异步是基于callback函数的回调形式来调用的

下面我们来举例一下异步和同步：
异步：
先打印100，然后一秒后打印200，在打印的过程中不等待，先执行打印300

console.log (100)
setTimeout ( function(){
    
    
	console.log ( 200)
},1000)
console.log (300)

同步：
先打印100，然后弹出200，点了确认之后才会打印300

console.log (100)
alert(200)
console.log (300)

所以基于JS是单线程语言，异步不会阻塞代码执行，同步会阻塞代码执行

异步的应用场景

什么时候会用到异步呢？也就是需要等待的情况：

网络请求，如 ajax 图片加载
定时任务，如 setTime

例如在ajax中：
先打印start，然后执行网络请求，等待过程中打印end，请求成功后打印data1

console.log( 'start ' )
$.get( './data1.json' , function (data1) {
    
    
console.log (data1)
})
console.log ( 'end ')

图片加载：
先执行start，然后等待加载图片的过程中先打印end，最后加载成功打印loaded

console.log ('start')
let img = document.createElement( 'img' )
img.onload = function () {
    
    
	console.log( 'loaded' )
}
img.src = '/xxx. png'
console.log ( 'end' )

在定时器中：
原理跟上面的一样，上面有讲

console. log (100)
setTimeout ( function(){
    
    
	console. log (200)
},1000)
console. log (300)

Promise的基本使用

先来看个代码：
1.首先定义getData函数，然后return 一个new Promise，里面再传一个函数，函数中有两个参数resolve 和 reject 。
2.当成功的时候，通过resolve将data返回出去。失败的时候执行err。也就是会对应触发下面案例中的.then和.catch

function getData(url) {
    
    
	return new Promise((resolve, reject) => {
    
    
		$.ajax({
    
    
			url,
			success (data) {
    
    
				resolve (data)
			},
			error(err) {
    
    
				reject(err)
			}
		})
	})
}

如果不懂，别急来看看怎么去用
1.先定义三个url
2. .then就是上面promise里面的方法，后面data1就是通过url获取的数据
3. return getData(url2)后继续.then，后面的与上同理，最后再.catch捕捉错误

const url1 = '/data1.json'
const url2 = '/ data2. json'
const url3 = '/ data3.json '
getData(url1) .then ( data1 => {
    
    
	console.log (data1)
	return getData(url2)
}).then(data2 => {
    
    
	console.log(data2)
	return getData(url3)
}).then(data3 => {
    
    
	console.log (data3)
}).catch(err =>console.error(err))

这里的.then就相当于串联起来，一层层的往后走

最后

本篇文章是对异步的一个基础讲解，关于异步这一块的内容可考察的有很多，后续会继续给大家带来关于手写promise，async，await等等问题的解决，然后整理一下这块的面试题，后续更新！！