Promise
Promise介绍
引入：
- Es6 新对象
- 作用：用于异步操作的封装，更好的更优雅的处理异步任务结果
- 特点是链式调用可以解决回调地狱的问题
- 回调地狱：后面异步任务需要前面异步任务结果作为参数时i，使用回调函数形式写法会形成嵌套，如果这种情况过多，形成回调地狱
Promise语法
let promise = new Promise((resolve,reject)=>{
//定时器案例
let num = Math.floor(Math.random() * 10)
setTimeout(() => {
if (num % 2 == 0) {
//console.log('偶数')
resolve('成功')
} else {
//console.log('奇数')
reject('失败')
}
}, 1000)
})
promise.then(result=>{})//成功
promise.catch(error=>{})//失败
promise-ajax封装
let promise = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest()
xhr.open('get', 'http://10.7.162.150:8089/api/shop/list')
xhr.send()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText)
let result = JSON.parse(xhr.responseText)
resolve(result) // 成功结果
} else {
console.log('网络请求失败 ' + xhr.status)
reject('网络请求失败 ' + xhr.status)
}
}
}
ajax({
method:'get',
url:'http://10.7.162.150:8089/api/shop/list',
success:function(result){
resolve(result) // 成功结果
},
fail:function(error){
reject(error)
}
})
})
promise.then(result => {
console.log(result)
})
promise.catch(erorr => {
console.log(error)
})
promise链式调用示例
/*
封装一个函数获取promsie对象， promise对象封装处理网络请求异步任务
options = {
method:'get',
url:''
data:{}
}
*/
myPromise({
method: 'get',
url: 'http://10.7.162.150:8089/api/shop/list',
})
.then(result => {
let list = result.resultInfo.list //商品列表
return myPromise({
method: 'get',
url: 'http://10.7.162.150:8089/api/shop/find',
data: {
id: list[0].id,
},
})
})
.then(resultB => {
console.log(resultB)
// return myPromise({
// method:'get',
// url:'C'
// })
})
调用接口获取后端数据
1. 原生ajax
let xhr = new XMLHttpRequest()
xhr.open()
xhr.send()
xhr.onreadystatechange=function(){
}
2. 封装ajax回调函数
引入myajax.js
ajax({
method:'get',
url:'',
data:{},
success:function(res){},
fail:function(error){}
})
3. 封装promise写法
引入myajax.js
myPromise({
method:'get',
url:'',
data:{}
}).then(res=>{
成功
}).catch(error=>{
失败
})
promise类对象方法
调用接口获取后端数据
1. 原生ajax
let xhr = new XMLHttpRequest()
xhr.open()
xhr.send()
xhr.onreadystatechange=function(){
}
2. 封装ajax回调函数
引入myajax.js
ajax({
method:'get',
url:'',
data:{},
success:function(res){},
fail:function(error){}
})
3. 封装promise写法
引入myajax.js
myPromise({
method:'get',
url:'',
data:{}
}).then(res=>{
成功
}).catch(error=>{
失败
})
项目中使用promise
- 使用状态管理Pinia封装动态权限菜单的地方使用了promise
- 在promise中封装获取动态菜单和获取动态资源权限的操作，当这两个异步操作都成功后，跳转到主界面
多个promise封装的异常操作用上个方法实现
- promise.all([promise,promise])
- promise.race([promise,promise])
export const useMenuStore = defineStore('menu', {
state: () => {
return {
menuList: [],
resourceList: [],
}
},
actions: {
saveMenuList(roleId: number) {
return new Promise(async (resolve, reject) => {
// 封装网络获取动态菜单
// const data = await RequestMenu(roleId)
// const { resultCode, resultInfo } = data
// if (resultCode === 1) {
// // 1.保存网络菜单接口数据
// this.menuList = resultInfo
// // 2.格式化菜单数据
// let routeMenuList = formateRouterMenu(resultInfo)
// // 3.添加动态路由,router对象
// routeMenuList.forEach(route=>router.addRoute(route))
// }
// // 获取资源权限
// const resData = await RequestResource(roleId)
// if(resData.resultCode === 1){
// this.resourceList = resData.resultInfo.resource
// }
let menuPromise = RequestMenu(roleId)
let resourcePromise = RequestResource(roleId)
//多个promise封装的异常操作用上个方法实现 Promise.all([promise,promise]) Promise.race([promise,promise])
const dataList: any = await Promise.all([
menuPromise,
resourcePromise,
])
const menuData = dataList[0]
const resourceData = dataList[1]
if (menuData.resultCode === 1) {
// 1.保存网络菜单接口数据
this.menuList = menuData.resultInfo
// 2.格式化菜单数据
let routeMenuList = formateRouterMenu(menuData.resultInfo)
// 3.添加动态路由,router对象
routeMenuList.forEach((route: any) =>
router.addRoute(route)
)
}
if (resourceData.resultCode === 1) {
this.resourceList = resourceData.resultInfo.resource
}
resolve('')
})
},
},
getters: {
// 组件获取list值,直接store.list,不用写getters. 与vuex 中store.getters.list不同
list: state => state.menuList,
},
// 使用该插件，开启数据缓存
persist: {
//这里存储默认使用的是session
enabled: true,
strategies: [
{
//key的名称
key: 'menuKey',
//更改默认存储，我更改为localStorage
storage: localStorage,
// 可以选择哪些进入local存储，这样就不用全部都进去存储了
// 默认是全部进去存储
paths: ['menuList', 'resourceList'],
},
],
},
})
- 网络axios封装，响应拦截器中进行无感刷新
- Promise三个状态：进行中 pending,成功状态 fulfilled，失败状态 rejected
- 链式调用
- 系统管理模块菜单管理页面中，左侧显示菜单列表，右侧显示第一个菜单下的子菜单列表；先获取菜单列表，根据菜单列表中第一个菜单ID获取对应的子菜单列表（return 一个promise对象）
- 手写Promise
本地存储Storage
本地存储 Storage
电脑硬盘 存储化存储数据
电脑内存 临时数据 -电脑关机或者程序终止数据消失
localStorage对象
setItem(key1,value1) // 存储一条数据到localStorage
setItem(key2,value2) // 存储一条数据到localStorage
let value1 = getItem(key1) // 获取localStorage数据
removeItem(key) //移除key对应数据
clear() // 清空所有数据
key 类型 字符串类型
value 字符串
let obj = {name:'jack',age:18}
JSON.stringify(obj)
true -> 'true'
100 -> '100'
浏览器 application选项查看localStorage持久化存储的数据
代码：
function test2() {
localStorage.setItem('obj1', JSON.stringify({ name: 'jack', age: 18 }))
localStorage.setItem('obj', JSON.stringify({ name: 'jack', age: 20 }))
let obj = localStorage.getItem('obj')
obj = JSON.parse(obj)
console.log('obj >> :', obj, typeof obj) // [object Object]
}
// let obj = localStorage.getItem('obj')
// console.log(obj);
// test2()
function test1() {
localStorage.setItem('num', 100) // 向localStorage存key为num值为100的一条数据
localStorage.setItem('state', true) // 向localStorage存key为state值为true的一条数据
let num1 = localStorage.getItem('num')
let state = localStorage.getItem('state')
console.log('获取num值是 ', typeof num1)
console.log('state类型 ', typeof state, ' state :', state)
if (state) {
console.log('成立')
} else {
console.log('不成立')
}
// 取对象
}
// test1()
// 商品列表
function test() {
let productList = [
{
number: 1001,
name: 'javascript高级编程',
url: './image/shoppingBg_03.jpg',
price: 88.98,
num: 0,
},
{ number: 1002, name: 'css高级编程', url: './image/shoppingBg_06.jpg', price: 58.58, num: 0 },
{ number: 1003, name: 'html高级编程', url: './image/shoppingBg_03.jpg', price: 48.58, num: 0 },
]
localStorage.setItem('list', JSON.stringify(productList))
let newProudct = {
number: 1004,
name: 'vue高级编程',
url: './image/shoppingBg_03.jpg',
price: 100,
num: 0,
}
// 先获取localStorage中已经存储的商品列表数据
let productListStr = localStorage.getItem('list')
list = JSON.parse(productListStr)
list.push(newProudct)
localStorage.setItem('list', JSON.stringify(list))
}
// test()
function test3() {
let newProudct1 = {
id: 1001,
name: 'javascript高级编程',
url: 'https://img2.baidu.com/it/u=544283419,3814727158&fm=253&fmt=auto&app=120&f=JPEG?w=477&h=307',
price: 100,
num: 0,
}
// 商品存储到数组，将数组持久化存储到localStorage,一条一条存储
let list = localStorage.getItem('list') || '[]' // 如果localStorage没有存储过商品返回空数组
list = JSON.parse(list)
list.push(newProudct1)
localStorage.setItem('list', JSON.stringify(list))
// 添加第二条商品
let newProudct2 = {
id: 1002,
name: 'vue高级编程',
url: 'https://img0.baidu.com/it/u=213764802,1949531026&fm=253&fmt=auto&app=138&f=JPEG?w=417&h=236',
price: 100,
num: 0,
}
let list1 = localStorage.getItem('list') || '[]'
list1 = JSON.parse(list1)
list1.push(newProudct2)
localStorage.setItem('list', JSON.stringify(list1))
}
// test3()
