文章目录

同步与异步基础内容Promise对象使用 async&await&axios封装过程async&awai也是异步的解决方案axios封装过程

同步与异步

基础内容

js 是单线程语法，没有异步编程的功能 但是系统给我们提供了很多异步编程的解决方案 ajax log scriptnodejs可以多线程，多线程的原因因为他的底层语法是c++，c++里有多线程。后端nodejs里fs模块里的readFile方法是异步方法ES5 ES6的prosime 构造函数为我们提供了异步编程的解决方案

Promise对象使用

把Promise当成存储数据的容器，用then方法获取回调函数里的数据 p.then((a)=>{}).then里的箭头函数就是c1 三种状态：pending（进行中）、fulfilled（获得正确结果的结束状态）、reject（获得错误结果的结束状态） pending、fulfilled、rejected(未决定，履行，拒绝)，同一时间只能存在一种状态,且状态一旦改变就不能再变。promise是一个构造函数，promise对象代表一项有两种可能结果（成功或失败）的任务，它还持有多个回调，出现不同结果时分别发出相应回调。

1.初始化，状态：pending

2.当调用resolve(成功)，状态：pengding=>fulfilled ​ 3.当调用reject(失败)，状态：pending=>rejected

创建的promise对象里面有一个回调函数，回调函数里面还有两个回调函数参数 var p=new Promise((c1,c2)=>{业务代码，这个业务代码是异步任务，比如readFile或者ajax请求})c1，c2是回调函数，实际写代码中c1与c2要分别写成 resolve和reject

<script> var p=new Promise((c1,c2)=>{ //在promise对象内部写的代码是同步的，在外部用then方法获取数据的时候是异步的 setTimeout(()=>{ var a=5 c1(a) },1000) for(var i=0;i<10;i++){} console.log(2); //c1(i) }) //在js内部就是正常按顺序执行，只有系统给的方法会有异步操作 console.log(p) //pendding console.log(4) console.log(p) //pendding p.then((data)=>{console.log(data)}).catch((data)=>{console.log(data)})//这里出现异步，因为有个等待data传入的时间，这个时间会接着往下执行 console.log(3) //得到结果是 ： 2 ，4 ，3 ，10 这个也是一般面试问的执行顺序 </script>

async&await&axios封装过程

async&awai也是异步的解决方案

await使用 作用1：会帮我们取出一个promise对象中的数据 作用2：会帮我们暂停程序 作用3：await关键字必须在async函数里面

async function fn（）{ var data= await myaxios（“请求到的数据”） }

axios封装过程

<script> //工具代码 function myaxios(url) { var p = new Promise((reslove,reject) => { let xhr = new XMLHttpRequest() xhr.open("GET", url, true) xhr.send() xhr.onreadystatechange = () => { if (this.readystate == 4) { if (this.status == 200) { reslove(this.responseText) }else if(this.status==404){ reject(this.responseText) } } } }) return p } //业务代码 var url="http://192.168.3.130:9999/520.html" var p1=myaxios(url) p1.then((data)=>{ console.log(data) }) </script>