牛客刷题——前端面试【三】谈一谈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。


相关文章
|
3月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
146 60
|
14天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
111 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
74 4
|
3月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
84 3
|
4月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
4月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
103 2
|
4月前
|
JavaScript 前端开发 Python
django接收前端vue传输的formData图片数据
django接收前端vue传输的formData图片数据
87 4
|
4月前
|
NoSQL 前端开发 MongoDB
前端的全栈之路Meteor篇(三):运行在浏览器端的NoSQL数据库副本-MiniMongo介绍及其前后端数据实时同步示例
MiniMongo 是 Meteor 框架中的客户端数据库组件,模拟了 MongoDB 的核心功能,允许前端开发者使用类似 MongoDB 的 API 进行数据操作。通过 Meteor 的数据同步机制,MiniMongo 与服务器端的 MongoDB 实现实时数据同步,确保数据一致性,支持发布/订阅模型和响应式数据源,适用于实时聊天、项目管理和协作工具等应用场景。
101 0
|
4月前
|
存储 前端开发 API
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
前端开发中,Web Storage的存储数据的方法localstorage和sessionStorage的使用及区别
189 0
|
4月前
|
前端开发 Java 数据库
springBoot:template engine&自定义一个mvc&后端给前端传数据&增删改查 (三)
本文介绍了如何自定义一个 MVC 框架,包括后端向前端传递数据、前后端代理配置、实现增删改查功能以及分页查询。详细展示了代码示例,从配置文件到控制器、服务层和数据访问层的实现,帮助开发者快速理解和应用。