牛客刷题——前端面试【三】谈一谈Promise、封装ajax、json数据使用

简介: 如何使用Promise、封装ajax、json数据以下方法告诉你。

目录


一、Promise定义


二、基础用法(Proimse.prototype.then()、Promise.prototype.catch())


三、json的使用(需要先了解)


四、ajax的基础使用


       1.基本流程


       2.基本使用


       3.用promise封装


一、Promise定义


Promise是异步编程的一种解决方案,可以替代传统的解决方案--回调函数和事件。ES6统一了用法,并原生提供了Promise对象。作为对象,Promise有一下两个特点:


1.对象的状态不受外界影响

Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败),一旦发生改变就只有一种状态:Pending -> Fulfilled  Pending -> Rejected。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。


2.一旦状态改变了就不会在变,也就是说任何时候Promise都只有一种状态

Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。


二、基础用法(Proimse.prototype.then()、Promise.prototype.catch())


Promise 通过new关键词 回调函数有两个形参 第一个:resolve(成功) reject(失败的方法)resolve reject这两个可以改变Promise实例的状态


Proimse.prototype.then()

它的作用是为 Promise 实例添加状态改变时的回调函数。补充可以链式。


Promise.prototype.catch()

用于指定发生错误时的回调函数。

//Promise 通过new关键词 回调函数有两个形参 第一个:resolve(成功) reject(失败的方法)
//resolve reject这两个可以改变Promise实例的状态
const MyPormise = new Promise((resolve,reject)=>{
        let flag = true;
        if(flag){//成功的状态
            resolve("成功的值");
        }else{//失败状态
            reject("失败的值");
        }
        });
//获取 Promise的值,有两个参数,第一个参数:回调函数显示成功的状态,第二个是显示失败的状态
MyPormise.then(  //Proimse.prototype.then()
    resolve=>console.log(resolve)
    ,reject=>console.log(reject)
        )
//MyPormise.catch(  //Promise.prototype.catch()
//    reject=>console.log(reject)
//        )


三、json的使用(需要先了解)

let Person = '{"realname":"张三","age":19}';//对象的json数据格式
console.log(JSON.parse(Person));
let persons = '["张三","李四"]'  //数组的json数据格式
console.log(JSON.parse(persons));


四、ajax的基础使用


1.基本流程


用get打开请求地址


发送请求send()


监听状态的变化,从而获取数据


2.基本使用

const ajax = new XMLHttpRequest();
// 1.用get打开请求地址
ajax.open("GET","http://127.0.0.1:8848/web2209/ES6/test.json");
// 2.发送请求
ajax.send();
//3.监听状态的变化,从而获取数据
ajax.onreadystatechange = ()=>{
    if(ajax.readyState == 4){ //xml的状态
    if(ajax.status==200){//代表成功
    const data = JSON.parse(ajax.response);
    console.log(data);
        }else{
        console.log("请求失败");
        }
}
}
3.用promise封装
封装函数可以方便下一次的调用
function sendajax(url){
return  new Promise((resolve,reject)=>{
const Obj =  new XMLHttpRequest();
Obj.open("GET",url);
Obj.send();
Obj.onreadystatechange = ()=>{
if(Obj.readyState==4){
if(Obj.status==200){//http状态码
const data = JSON.parse(Obj.response);
        resolve(data);
}else{
        reject("数据请求失败...");
        }                    
    }                        
}
})
}
const MyPromise = sendajax("http://127.0.0.1:8848/web2209/ES6/test.json");
MyPromise.then((resolve)=>{
    console.log(resolve);
})



结束语:

让我们一起进步,拿到自己想要的offer。


相关文章
|
2月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
123 60
|
14天前
|
NoSQL 关系型数据库 MySQL
招行面试:高并发写,为什么不推荐关系数据?
资深架构师尼恩针对高并发场景下为何不推荐使用关系数据库进行数据写入进行了深入剖析。文章详细解释了关系数据库(如MySQL)在高并发写入时的性能瓶颈,包括存储机制和事务特性带来的开销,并对比了NoSQL数据库的优势。通过具体案例和理论分析,尼恩为读者提供了系统化的解答,帮助面试者更好地应对类似问题,提升技术实力。此外,尼恩还分享了多个高并发系统的解决方案及优化技巧,助力开发者在面试中脱颖而出。 文章链接:[原文链接](https://mp.weixin.qq.com/s/PKsa-7eZqXDg3tpgJKCAAw) 更多技术资料和面试宝典可关注【技术自由圈】获取。
|
24天前
|
存储 Java easyexcel
招行面试:100万级别数据的Excel,如何秒级导入到数据库?
本文由40岁老架构师尼恩撰写,分享了应对招商银行Java后端面试绝命12题的经验。文章详细介绍了如何通过系统化准备,在面试中展示强大的技术实力。针对百万级数据的Excel导入难题,尼恩推荐使用阿里巴巴开源的EasyExcel框架,并结合高性能分片读取、Disruptor队列缓冲和高并发批量写入的架构方案,实现高效的数据处理。此外,文章还提供了完整的代码示例和配置说明,帮助读者快速掌握相关技能。建议读者参考《尼恩Java面试宝典PDF》进行系统化刷题,提升面试竞争力。关注公众号【技术自由圈】可获取更多技术资源和指导。
|
3月前
|
存储 缓存 关系型数据库
滴滴面试:单表可以存200亿数据吗?单表真的只能存2000W,为什么?
40岁老架构师尼恩在其读者交流群中分享了一系列关于InnoDB B+树索引的面试题及解答。这些问题包括B+树的高度、存储容量、千万级大表的优化、单表数据量限制等。尼恩详细解释了InnoDB的存储结构、B+树的磁盘文件格式、索引数据结构、磁盘I/O次数和耗时,以及Buffer Pool缓存机制对性能的影响。他还提供了实际操作步骤,帮助读者通过元数据找到B+树的高度。尼恩强调,通过系统化的学习和准备,可以大幅提升面试表现,实现“offer直提”。相关资料和PDF可在其公众号【技术自由圈】获取。
|
3月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
3月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
|
3月前
|
监控 Java easyexcel
面试官:POI大量数据读取内存溢出?如何解决?
【10月更文挑战第14天】 在处理大量数据时,使用Apache POI库读取Excel文件可能会导致内存溢出的问题。这是因为POI在读取Excel文件时,会将整个文档加载到内存中,如果文件过大,就会消耗大量内存。以下是一些解决这一问题的策略:
484 1
|
3月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
77 4
|
3月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
|
3月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
171 0