Promise和本地存储 Storage

Promise

语法：ES6新增一个对象
作用：对异步任务进行封装，更好的更优雅的处理异步任务结果
回调函数
ajax({
success:function(data){}
})
setTimout(function(){
},1000)
使用：
let promise=new Promise(function(resolve,reject){
// resolve 函数 处理异步任务成功的结果 resolve(‘成功’)
// reject 函数 处理异步任务失败的结果 reject(‘失败’)
// 异步任务封装
setTimeout(function(){
if(true){
resolve(‘成功’)
}else{
reject(‘失败’)
}
},1000)
})
promise.then(function(result){
result=>成功
})
promise.catch(function(error){
error=>失败
})})

/*
           使用promise封装定时器异步任务,判断随机数偶数返回'成功'奇数返回'失败'
             1. 不使用promise实现,判断随机数偶数返回'成功'奇数返回'失败' 

        */

			let promise = new Promise((resolve, reject) => {
				let num = Math.floor(Math.random() * 10) // [0-10)
				console.log('num ', num)
				// 封装异步任务
				setTimeout(() => {
					if (num % 2 == 0) {
						resolve('成功')
					} else {
						reject('失败')
					}
				}, 1000)
				console.log('promise封装代码执行完成')
			})

			promise.then(result => {
				console.log('then 接收成功数据 ', result)
			})
			promise.catch(error => {
				console.log('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)
						}
					}
				}
			})
			promise.then(result => {
				console.log(result)
			})
			promise.catch(erorr => {
				console.log(error)
			})

promise链式调用

是比回调函数 更好的更优雅的方法处理异步结果
有多个请求，后面请求需要用到前面请求的结果
使用回调函数，就会出现回调嵌套（回调地狱问题）

Promise三种状态

• pendding进行中
• fulfillde已成功
• rejected已失败
  -状态一旦改变，就不会再变化

Promise类对象方法

类对象 实例对象 原型对象

Promise.all([promise1,promise2…])
=>promise对象 包含数组中所有promise对象执行结果

// 获取商品列表
			let promise1 = myPromise({
				method: 'get',
				url: 'http://10.7.162.150:8089/api/shop/list',
			})
			// promise1.then(res=>{
			//     console.log('商品列表',res);
			// })

			// 获取bannber轮播列表
			let promise2 = myPromise({
				method: 'get',
				url: 'http://10.7.162.150:8089/api/shop/banner',
			})
			// promise2.then(res=>{
			//     console.log('bannber列表 ',res);
			// })

			Promise.all([promise1, promise2]).then(res => console.log('res >> ', res))

Promise.race([promise1,promise2…])
=>竞争
=>最先执行完的异步promise的结果

// 获取商品列表
			let promise1 = myPromise({
				method: 'get',
				url: 'http://10.7.162.150:8089/api/shop/list',
			})
			// promise1.then(res=>{
			//     console.log('商品列表',res);
			// })

			// 获取bannber轮播列表
			let promise2 = myPromise({
				method: 'get',
				url: 'http://10.7.162.150:8089/api/shop/banner',
			})
			// promise2.then(res=>{
			//     console.log('bannber列表 ',res);
			// })

			 Promise.race([promise1, promise2]).then(res => console.log(res))

Promise.reject(‘失败’).cath(‘’)
Promise.resolve(‘成功’).then(‘’)

网络请求获取后端数据时：

1. 原生ajax
2. ajax方法
3. 封装promise myPromise()
4. axios库

本地存储 Storage

电脑硬盘 存储化存储数据
电脑内存 临时数据-电脑关机或者程序终止数据消失
localStorage对象
setItem(key,value) //存储一条数据到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 test3(){
                let newProudct1 = {number:1001, name:'javscript高级编程',url:'./image/shoppingBg_03.jpg', 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 = {number:1002, name:'vue高级编程',url:'./image/shoppingBg_03.jpg', price:100,num:0}
                let list1= localStorage.getItem('list') || '[]'
                list1 = JSON.parse(list1)
                list1.push(newProudct2)

                localStorage.setItem('list',JSON.stringify(list1))
            }
            test3()