javascript的同步代码和异步代码

随着互联网的发展，JavaScript作为前端开发的主要语言，也不断地发展和完善。在JavaScript中，同步代码和异步代码是两个非常重要的概念，也是开发过程中需要了解的基础知识。本文将对JavaScript中的同步代码和异步代码进行详细介绍，并分析它们在开发中的应用。

1.同步代码

同步代码是指按照代码的顺序依次执行，每个代码块执行完之后才能执行下一个代码块。也就是说，同步代码是顺序执行的，必须等待前一个代码块执行完毕后才能执行下一个代码块。

在JavaScript中，同步代码是默认的代码执行方式。例如，下面的代码展示了一个简单的同步代码的例子。代码中，首先定义了一个数组，然后使用for循环遍历数组中的元素，并输出每个元素的值。

var arr = [1, 2, 3, 4, 5];

for(var i=0; i<arr.length; i++){

    console.log(arr[i]);

}

console.log('666');

可以看到代码是一行一行执行的。循环体执行后，随之才输出‘666’

2.异步代码

异步代码是指不按照代码的顺序执行，而是在某个事件触发之后才会执行。也就是说，异步代码不会阻塞代码的执行，可以在等待某些操作完成的同时继续执行其他代码。

在JavaScript中，异步代码的应用非常广泛，比如网络请求、文件读写、定时器等。异步代码的执行方式可以通过回调函数、Promise、async/await等方式实现。

2.1 下面展示一个通过回调函数实现异步的代码

setTimeout(()=>{

 console.log('123');

},2000)

console.log('666');

结果：

可以看到 输出666 ，这个操作并不会等待上面执行完，再执行。也就是说 setTimeout 并不会阻塞代码的执行，然后2秒后再输出123

2.2  再来一个网络通讯例子

使用XMLHttpRequest对象发送一个GET请求，等待服务器返回数据后再执行回调函数。

var xhr = new XMLHttpRequest();

xhr.open('GET', 'http://example.com/api/data', true);

xhr.onreadystatechange = function(){

   if(xhr.readyState === 4 && xhr.status === 200){

        console.log(xhr.responseText);

   }

};

xhr.send();

在上面的代码中，xhr.onreadystatechange是一个回调函数，当服务器返回数据时，该函数会被调用。由于网络请求是异步的，因此在等待服务器返回数据的过程中，JavaScript可以继续执行其他代码。

2.3  async/await

以下是取图片验证码

import { getPicCode,sendSms,codeLogin } from '@/api/login'

async getPicCode(){

   const res = await getPicCode()

   //console.log(res);

   this.piccode = res.data.base64;

   this.pickey =  res.data.key;

}

@/api/login

import rqs from "@/util/request"

export const getPicCode = ()=>{

   return rqs.get('/captcha/image')

}