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


相关文章
|
前端开发 JavaScript 开发者
前端开发中的异步编程:Promise 和 Async/Await 的比较与应用
在现代前端开发中,异步编程是不可或缺的技术。本文将深入探讨Promise和Async/Await这两种主流的异步编程方式,分析它们的优劣势及在实际项目中的应用场景。通过比较它们的语法、可读性和错误处理机制,帮助开发者更好地选择和理解如何在项目中高效地利用这些技术。
|
5月前
|
前端开发 JavaScript
AJax(XHR+Get和Post+AJax的封装)
AJax(XHR+Get和Post+AJax的封装)
97 15
|
12月前
|
存储 JSON 前端开发
面试官问了我很多package.json的知识,还好我早有准备!
【10月更文挑战第18天】面试官问了我很多package.json的知识,还好我早有准备!
|
安全 Java
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
这篇文章讨论了封装在面向对象编程中的目的,强调封装可以隐藏类的实现细节,通过方法控制对数据的访问,保证数据完整性,并提高代码的可维护性。
Java基础面试十四】、 封装的目的是什么,为什么要有封装?
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
JSON Java 数据格式
【IO面试题 七】、 如果不用JSON工具,该如何实现对实体类的序列化?
除了JSON工具,实现实体类序列化可以采用Java原生序列化机制或第三方库如Protobuf、Thrift、Avro等。
|
存储 算法 安全
【刷题】 leetcode 面试题 01.06 字符串压缩
来看效果: 非常好!!!过啦!!!
134 5
【刷题】 leetcode 面试题 01.06 字符串压缩
|
算法
【刷题】 leetcode 面试题 08.05.递归乘法
递归算法是一种在计算机科学和数学中广泛应用的解决问题的方法,其基本思想是利用问题的自我相似性,即将一个大问题分解为一个或多个相同或相似的小问题来解决。递归算法的核心在于函数(或过程)能够直接或间接地调用自身来求解问题的不同部分,直到达到基本情况(也称为基础案例或终止条件),这时可以直接得出答案而不必再进行递归调用。
173 4
【刷题】 leetcode 面试题 08.05.递归乘法
|
前端开发 JavaScript 测试技术
前端 JS 经典:Promise 详解
前端 JS 经典:Promise 详解
293 1
|
JavaScript 前端开发
面试题分享之封装一个弹框组件
面试题分享之封装一个弹框组件
102 0