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

置顶 Ednburgh-

已于 2022-08-02 11:14:29 修改

阅读量645

点赞数 15

文章标签：前端 javascript ajax

于 2022-07-19 23:21:27 首次发布

本文链接：https://blog.csdn.net/m0_71345904/article/details/125879702

版权

本文详细介绍了Promise的基本概念、特点和使用，包括其状态的不可变性和模拟异步操作。接着讲解了JSON格式的数据定义、特点及转换方法，解析和序列化之间的关系。最后，探讨了AJAX的工作原理，包括创建XMLHttpRequest对象、发送请求、处理响应，并展示了AJAX的封装实现。通过这篇文章，读者可以全面掌握Promise、JSON和AJAX在前端开发中的核心应用。

摘要由CSDN通过智能技术生成

一，导语

二，promise

三，JSON格式的数据

四，ajax的封装

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

二，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: 请求已完成，且响应已就绪
状态：status
status 200: "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)
        })