漳浦网站建设,做封面网站,广告链接网页怎么做的,开个网站卖机器怎么做#x1f4bb; 【ES6】掌握Promise和利用Promise封装ajax #x1f3e0;专栏#xff1a;JavaScript #x1f440;个人主页#xff1a;繁星学编程#x1f341; #x1f9d1;个人简介#xff1a;一个不断提高自我的平凡人#x1f680; #x1f50a;分享方向#xff1a;目… 【ES6】掌握Promise和利用Promise封装ajax 专栏JavaScript 个人主页繁星学编程 个人简介一个不断提高自我的平凡人 分享方向目前主攻前端其他知识也会阶段性分享 格言☀️没有走不通的路只有不敢走的人☀️ 让我们一起进步一起成为更好的自己 文章目录【ES6】掌握Promise和利用Promise封装ajax一. 概念二. Promise的静态方法(1) all(2) race(3) allSettled (ES2020新增)(4) any(5) Promise的其他方法三. JavaScript容错处理try...catch...四. 利用promise封装ajax五. async和await【ES6】掌握Promise和利用Promise封装ajax
一. 概念
Promise是ES6 新增的特性
目的用来解决异步解决回调地狱问题
利用Promise类创建promise实例对象类的参数是回调函数回调函数又有两个参数(一般约定为resolve(成功)和reject(失败))
Promise 的基本语法
const 实例对象 new Promise(回调函数)eg
const p new Promise(function(resolve,reject){});回调函数中的参数
resolve成功的回调reject失败的回调
Promise 的三个状态
持续pending成功fulfilled失败rejected
Promise 的两种转换(三种状态变成两种可能)
从持续状态转换到成功从持续状态转换到失败
Promise 的实例原型方法
then(函数)成功状态的时候执行的方法catch(函数)失败状态的时候执行的方法finally(函数) 结束时执行的方法不管状态是成功还是失败finally都会执行
Promise 的调用方式 (链式调用)
当在第一个then里面返回 一个新的promise对象的时候可以在第一个then后面继续第二个then
const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000console.log(time);setTimeout(() {if (time 3000) {console.log(成功);resolve(success);} else {console.log(失败);reject(reject);}}, 2000);
});
// 成功状态的时候执行
p.then(function (sa) {console.log(sa);
})
// 失败状态的时候执行
p.catch(function (sc) {console.log(sc);
});使用函数简单封装Promise代码
function fz() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000console.log(time);setTimeout(() {if (time 3000) {resolve(success)} else {reject(reject);}}, 2000);});return p;
}
fz().then(function (num) {console.log(1成功, num);
}).then(function (num) {console.log(2成功, num);
}).then(function (num) {console.log(3成功, num);
}).catch(function (num) {console.log(失败, num);
}).finally(function () {console.log(无论最终是成功还是失败都会执行);
})二. Promise的静态方法
(1) all
语法Promise.all([多个 Promise])
作用用于将多个 Promise 实例包装成一个新的 Promise 实例接受一个数组作为参数只有数组里面的每个状态都变成resolve则新的 Promise 实例状态才会变成resolve。
function fz1() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第一个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}
function fz2() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第二个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}
function fz3() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第三个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}Promise.all([fz1(), fz2(), fz3()]).then(res console.log(成功, res)).catch(err console.log(失败, err))(2) race
语法Promise.race([多个promise])
作用将多个 Promise 实例包装成一个新的 Promise 实例接受一个数组作为参数只要其中有一个实例率先改变状态则整个的状态就跟着改变。
function fz1() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第一个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}
function fz2() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第二个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}
function fz3() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000;console.log(time, 第三个请求);setTimeout(() {if (time 3000) {resolve({ code: 1, message: 成功 })} else {if (time 2500) {resolve({ code: 0, message: 失败1 })} else {resolve({ code: 2, message: 失败2 })}}}, time)})return p;
}
Promise.race([fz1(), fz2(), fz3()]).then(res console.log(成功, res)).catch(err console.log(失败, err))(3) allSettled (ES2020新增)
语法Promise.allSettle([多个promise])
作用方法接受一个数组作为参数数组的每个成员都是一个 Promise 对象并返回一个新的 Promise 对象。只有等到参数数组的所有 Promise 对象都发生状态变更不管是fulfilled还是rejected返回的 Promise 对象才会发生状态变更。
简单理解就是不管是成功还是失败都会触发并会把结果用数组的形式返回数组里面放着每一个promise的结果
let p1 new Promise((resolve, reject) {resolve(1)
});
let p2 new Promise((resolve, reject) {reject(2)
});
let p3 new Promise((resolve, reject) {reject(3)
});let allSettled Promise.allSettled([p1, p2, p3]);
allSettled.then((res) {console.log(then:, res); // 返回数组数组里面有三个对象对象里面区分成功和失败的值状态是正常的。//status:resolve value / status:reject reasonconsole.log(res[0].status); // fulfilledconsole.log(res[0].value); // 1console.log(res[1].status); // rejectedconsole.log(res[1].reason); // 2
});(4) any
语法Promise.any([多个promise])
作用该方法接受一组 Promise 实例作为参数包装成一个新的 Promise 实例返回。Promise.any()不会因为某个 Promise 变成rejected状态而结束必须等到所有参数 Promise 变成rejected状态才会结束。
let p1 new Promise((resolve, reject) {reject(1)// resolve(1)
});
let p2 new Promise((resolve, reject) {// reject(2)resolve(2)
});
let p3 new Promise((resolve, reject) {reject(3)
});// 解析
// 如果遇到成功的请求通过then返回resolve传递给then对应的值如果都是失败的状态最终走catch输出默认的字符( All promises were rejected),执行catch里面的代码无法获取reject里面传入的值。
let any Promise.any([p1, p2, p3]);
any.then(res {console.log(then:, res);
}).catch(msg {console.log(catch代码); console.log(msg); //默认的字符All promises were rejected
});(5) Promise的其他方法
以下两个方法主要是开发人员调试用的 resolve()强行把promise的状态改为成功 let num 10;
Promise.resolve(num).then(res console.log(res))
console.log(1);reject()强行把Promise的状态改为失败 let num 10;
Promise.reject(num).then().catch(res {console.log(res) // 10
});
console.log(1); // 1三. JavaScript容错处理
因为js代码如果出现错误立刻停止后续的代码不会执行。
console.log(a); // referenceError:a is not defined
console.log(1);所以需要采用方法使js代码出现错误时不会影响到后续代码
try…catch…
语法1
try {执行代码} catch (err) {执行代码}使用
首先执行try里面的代码如果不报错catch不执行 如果报错不会抛出错误而是执行catch把错误信息给到err。
try {console.log(a);
} catch (e) { //e:try里面如果存在错误e就是try里面的错误信息console.log(e); // referenceError:a is not defined console.log(这里是catch的输出); // 这里是catch的输出
}console.log(后面后续的代码输出); // 后面后续的代码输出
console.log(后面后续的代码输出); // 后面后续的代码输出语法2
try {执行代码} catch (err) {执行代码} finally{执行代码}注finally里面的语法不管是执行try还是catchfinally里面的代码一定会执行。
try {console.log(a);
} catch (e) { //e:try里面如果存在错误e就是try里面的错误信息console.log(e); // referenceError:a is not definedconsole.log(这里是catch的输出);
} finally { //收尾的工作不再使用的对象变量设置nullconsole.log(finally一定会执行);
}
/*
输出结果afinally一定会执行
*/应用场景-案例
随机生成一个数字添加判断条件最终输出成功或失败结果
function fz() {const p new Promise(function (resolve, reject) {const time Math.random() * 2000 2000console.log(time);setTimeout(() {if (time 2500) {resolve(success)} else {reject(reject);}}, 2000);});return p;
}
async function cs() {try {const res1 await fz();console.log(res1);} catch (err) {const res2 await fz();console.log(res2);}
}
cs()四. 利用promise封装ajax
封装前的分析
/*封装ajax function ajax(options){}调用封装的ajaxajax({})分析封装方案1. 回调函数方式- 将来使用的时候可能会出现回调地狱2. promise - 后面 then/catch- 也可以用async/await参数1. 请求地址 url 必填2. 请求方式 method选填只允许 get post要么不传默认值 get3. 是否异步 async选填 默认true4. 参数 data 选填默认是, 允许传查询字符串 和 对象5. 请求头headers 选填默认{content-type:application/x-www-form-urlencoded}6. 是否解析响应的参数 dataType, 选填 默认是string, 选填 json
*/封装代码
// 对象格式转查询字符串格式
function queryString(obj) {let str for (let k in obj) {str ${k}${obj[k]}}return str.slice(1)
}// 利用闭包保存url基准地址
function createAjax(url) {// 设置一个变量作为基准地址并长期保存这个变量let baseUrl url// 封装ajax函数function ajax(options {}) {// 1.验证参数格式// 1-1.验证url格式必填if (!options.url) {// 没填抛出错误url必填throw new Error(url必填)}// 1-2.验证method要么不写要么get或postif (!(options.method undefined || /^(get|post)$/i.test(options.method))) {throw new Error(请求方式支持get 和 post)}// 1-3.验证async要么不写要么true/false 参数是布尔类型if (!(options.async undefined || typeof options.async boolean)) {throw new Error(async需要一个布尔值)}// 1-4.验证data要么不写支持字符串格式/对象格式if (!(options.data undefined || typeof options.data string || Object.prototype.toString.call(options.data) [object Object])) {throw new Error(data需要一个字符串格式或者对象格式)}// 1-5.验证headers要么不写要么是对象格式if (!(options.headers undefined || Object.prototype.toString.call(options.headers) [object Object])) {throw new Error(headers需要一个对象格式)}// 1-6.验证dataType参数要么不写要么是string 或者 json if (!(options.dataType undefined || /^(string|json)$/.test(options.dataType))) {throw new Error(dataType 只能写 string json)}// 2.准备一个默认值const _default {// 修改请求地址基准地址options.url// egoptions.url /test/firsturl: baseUrl options.url,// method只有三个选择没写getpostmethod: options.method || get,// async只有三个选择没写truefalse并且没写默认值是true// 一个ES2020新的操作符 ??// ?? 空值运算符: 只有左边的是undefined或者null, 才使用右边的async: options.async ?? true,// data只能有三个选择字符串、对象、undefined默认值是data: options.data || ,// headers只能是 undefined或者对象默认是{content-type: application/x-www-form-urlencoded}headers: { content-type: application/x-www-form-urlencoded, ...options.headers },// 是否解析响应的参数 dataType, (选填) 默认是string, (选填) jsondataType: options.dataType || string}// 2-1.data可能是对象如果是对象需要转为查询字符串格式if (typeof _default.data object) {_default.data queryString(_default.data)}// 2-2.请求方式是get并且data有值url需要拼接上刚刚转换的dataif (/^get$/i.test(_default.method) _default.data) {_default.url _default.url ? _default.data}// 3 创建ajax对象 按照promise方式const p new Promise(function (resolve, reject) {const xhr new XMLHttpRequest()xhr.open(_default.method, _default.url, false)xhr.onload function () {// 这里的xhr.readyState必然是4onload是一个请求完成的事件// 如果请求成功xhr状态码是4http状态码是200-299 成功// 需求 根据业务进一步封装如果后端返回的内容中code为1成功其他失败if (xhr.readyState 4 /^2\d{2}$/.test(xhr.status)) {let res xhr.responseText// 根据服务端返回的内容判断// 首先代码进入到这里http请求成功可以成功从服务端拿到响应内容// 响应内容分两种情况// 一个是正确的// 一个是业务错误 参数不正确代码错误其他....// 根据后端返回的内容判断, code:1 正确的 成功// code 不是1 错误用户密码错误登录时间过期 try {res JSON.parse(res)}catch (err) {return}if (res.code 1) {// 正确的成功返回正确的数据 resolve({ code: 1, message: 成功, data: _default.dataType string ? xhr.responseText : res })} else {// 错误包括各种错误 resolve({ code: 0, message: 业务失败, err: res })}} else {// 请求不成功 -- 进入这里的代码必然是http状态码不是200-299的情况let res xhr.responseTextresolve({ code: 0, message: 网络请求失败, err: res })}}// 如果post if (/^post$/i.test(_default.method)) {xhr.setRequestHeader(content-type, _default.headers[content-type])}// 如果有token if (_default.headers.authorization) {xhr.setRequestHeader(authorization, _default.headers[authorization])}// 如果是post 需要发送dataif (/^post$/i.test(_default.method)) {xhr.send(_default.data)} else {xhr.send()}})// 把promise对象返回return p}// 返回ajax函数return ajax
}
// 设置url基准地址
let ajax createAjax(http://localhost:8888)测试
// 1.利用Promise的then()方法测试封装的ajax
// ajax({
// url: /test/first,
// }).then(res {
// console.log(res);
// })// 2.利用async await 测试封装的ajax
async function fn() {const res await ajax({ url: /goods/list, dataType: json })console.log(res);
}
fn()注测试前需要开启本地服务器
本地服务器下载地址Ajax案例测试本地服务器-Node.js文档类资源-CSDN文库
五. async和await async其实就是promise的语法糖。函数前面加一个async函数里面异步操作的方法前加一个await关键字。 顾名思义await就是让你等一下执行完了再继续往下走。 注意await只能在async函数中执行否则会报错。 目的让异步代码像同步代码一样执行。 async:异步的意思作用是申明一个异步函数函数的返回值是promise 对象 async function fn1() { }
console.log(fn1()); //async函数隐式返回一个promise对象await:等待 await是asyncwait的结合 即异步等待async和await 二者必须是结合着使用。 注匿名函数也可以使用async和await !async function () {let h await new Promise((resolve, reject) {resolve(hello)});console.log(h); //hello 证明await就是promise里面then的语法糖。
}();结束语 希望对您有一点点帮助如有错误欢迎小伙伴指正。 点赞您的赞赏是我前进的动力 ⭐收藏您的支持我是创作的源泉 ✍评论您的建议是我改进的良药 一起加油
