0


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)
        })

六,作者语录:

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

标签: 前端 javascript ajax

本文转载自: https://blog.csdn.net/m0_71345904/article/details/125879702
版权归原作者 前端阿烽 所有, 如有侵权,请联系我们删除。

“promise对象与ajax的爱情故事,还有JSON”的评论:

还没有评论