简单说Promise对象和异步编程的解决方案

同步与异步

基础内容

1. js 是单线程语法，没有异步编程的功能 但是系统给我们提供了很多异步编程的解决方案 ajax log script
2. nodejs可以多线程，多线程的原因因为他的底层语法是c++，c++里有多线程。后端nodejs里fs模块里的readFile方法是异步方法
3. 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>