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