promise对象与ajax的爱情故事，还有JSON

一，导语：今天想和大家分享一个对于日后工作经常能使用到的重要知识，希望小编的点点星火，可以燎原。我们一起学习一起进步吧！

二，promise

• 定义：Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。
• 特点：1，对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
• 2，一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。
• 三种状态

Pending状态（进行中）Fulfilled状态（已成功） Rejected状态（已失败）

一旦发生改变就只有一种状态：Pending -> Fulfilled Pending -> Rejected。

3：基本用法

Resolve，用来接收完成状态，reject用来接收失败的状态。具体怎么样，我们且看代码分析：

 const myPromise=new Promise((resolve,reject)=>{
            let flag=false;
            if(flag){
                resolve('成功了')
            }else{
                reject('失败了')
            }
        })
        myPromise.then((resolve)=>{
        console.log(resolve);
        },(reject)=>{
        console.log(reject);
        })
这里我们声明一个变量flag来手动调整promise的状态，如果flag为true，
接受的状态为完成（resolve），如果是false，接收的状态为失败（reject）

4，模拟异步

模拟未来即将发生的代码

执行步骤：

  function timeout(ms) {
            console.log('我是第二个出场');//代码自上而下执行，第2个被执行
            return new Promise((resolve, reject) => {
                resolve(7)//then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，
                console.log('我是第三个出场');//promise一旦被new了，里面的代码立即执行
                setTimeout(() => {
                    console.log('我是最后一个出场');//定时器为异步，最后在执行，与时间无关
                }, ms)
            })
        }
        console.log('我是第一个出场');//代码自上而下执行，第一个被执行
        const mypromise = timeout(2000);
        console.log('我是第四个出场');
        mypromise.then((resolve) => {
            console.log(resolve);
        })
     console.log('我是第五个出场');
执行机制遇到定时器，不管为多少时间后执行，
都会在异步中等待其他单线程执行完毕在执行，
通俗点就是执行机制会把定时器放到最后执行，
而函数是不调用不执行，promise对象一旦被new了，里面的代码会立即执行

打印结果，LOOKLOOK是不是和我们想的一样

结果确实如此，即使把定时器时间改为0，也是最后一个出场

三，JSON格式的数据

定义：

• JSON 英文全称 JavaScript Object Notation

JSON 是用于存储和传输数据的格式。

JSON 通常用于服务端向网页传递数据 。

特点：JSON 格式化后为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。

3，用法：1，解析JSON数据为js类型

var Person='{"realname":"小三","age":18}';//JSON数据格式必须外单内双引号！
        const p1=JSON.parse(Person);//将JSON转换成js对象，用于前后端数据对接
        console.log(p1);//{realname: '小三', age: 18}
使用JSON.parse()方法解析为js数据类型，方便前端进行数据传输，通常用于前后端数据对接使用

var person='["小三","小四"]'
        console.log(typeof person);//string字符串类型
        const p2=JSON.parse(person)

        console.log(p2);// ['小三', '小四']js数组
类似js数组，实际上是JSON字符串，转换为数组

2，解析js为JSON数据类型

//将js转成JSON
        var  person={name:'小三',age:19}
        const p1=JSON.stringify(person)//js转JSON
        console.log(p1);//{"name":"小三","age":19}区别就在于key键加了引号
使用JSON.stringify（）方法转换js为JSON类型

四，ajax的封装

定义：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

步骤：

• 1，创建：XMLHttpRequest 对象
• 2，请求：向服务器发送请求，使用XMLHttpRequest 对象的两种方式，open（）打开；send（）将请求发送到服务器
• open（）里有三个基本参数：
• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置，该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
• async：true（异步）或 false（同步），判断是同步还是异步，默认不写为true，来执行异步，不推荐false

• GET 还是 POST？与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

• 不愿使用缓存文件（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 没有数据量限制）
• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠,
• 3响应： 当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发** onreadystatechange** 事件。readyState 属性存有 XMLHttpRequest 的状态信息
• 当 readyState** 等于 4 且状态status为 200 时**，表示响应已就绪
• onreadystatechange ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
• readyState ：五个参数：
• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪
• 状态：statusstatus200: "OK" 404: 未找到页面

拓展：当 readyState** 等于 4 且状态status为 200 时**，表示响应已就绪，这句话大概什么意思？

通俗点就是比如你去同学家玩，你找到了他家，并且同学也在家，你就可以成功和他一起玩耍

4，AJAX实现过程

 const ajax=new XMLHttpRequest();
            console.log(ajax.readyState);//0
            //1.用get打开请求地址
            ajax.open("GET","http://127.0.0.1:5500/test.json")
            //2,发送请求
            ajax.send();
            ajax.onreadystatechange=()=>{
                if(ajax.readyState==4){//0,1,2,3,4表示xml的状态
             if(ajax.status==200){//200代表请求成功
           const data=JSON.parse(ajax.response);//将json转成js类型 response为接收json值
           console.log(data);//{code: '200', message: '人员列表信息', lists: Array(2)}

             }else{
                 console.log('请求失败');
             }
                }
            }

5，封装AJAX

  function sendajax(url) {
            return new Promise((resolve, reject) => {
                const ajax = new XMLHttpRequest();
                ajax.open("GET", url)
                ajax.send();
                ajax.onreadystatechange = () => {
                    if (ajax.readyState == 4) {
                        if (ajax.status == 200) {
                            const data = JSON.parse(ajax.response);
                            resolve(data);
                        } else {
                            reject('数据请求失败...')
                        }
                    }
                }
            })
        }
        const mypromise = sendajax("http://127.0.0.1:5500/test.json")
        mypromise.then((resolve) => {
     
            console.log(resolve);;//{code: '200', message: '人员列表信息', lists: Array(2)
        })

六，作者语录：

不登高山，不知天之高也;不临深溪，不知地之厚也