Promise的运用（语法，作用、特点、状态方法以及封装）、本地存储 Storage

最新推荐文章于 2023-01-13 19:48:21 发布

TOTO come on

最新推荐文章于 2023-01-13 19:48:21 发布

阅读量205

点赞数

文章标签： javascript servlet ajax

本文链接：https://blog.csdn.net/qq_56756602/article/details/126988693

版权

Promise

语法：ES6新增一个对象

作用：对异步任务进行封装，更好的又优雅的处理异步任务的结果

回调函数

ajax({

success:function(data){}

})

setTimeout(function(){

},1000)

使用：

let promise=new Promise(function(resolve,reject){

//resolve 函数处理异步任务成功的结果 resolve('成功')

//reject 函数处理异步任务失败的结果 reject('失败')

//异步任务的封装

setTimeout(function{

if(true){

resolve('成功')

}else{

reject('失败')

}

}，1000)

})

promise.then接收resolve成功的结果

promise.catch 接收reject失败的结果

promise.then (function(result){

result =>成功

})

promise.catch(function(error){

error=>失败

})

    <script>
        /*
         *使用promise封装定时器异步任务，判断随机数偶数返回成功，奇数返回失败 
                 1.不使用peomise实现，判断随机数偶数返回成功，奇数返回失败 
         */
        let num=Math.random(Math.random()*10)
        if(num%2==0){
            console .log('偶数')
        }else{
            console .log('奇数')

        }
// 2.使用promise
//                            成功    失败
//                     交给   then    catch函数处理结果
     let promise=new Promise((resolve,reject)=>{
        let num=Math.floor(Math.random()*10)
        console.log('num',num)

   
        // 封装异步任务
        setTimeout(()=>{
            if(num%2==0){
            // console .log('偶数')
            resolve('成功')
        }else{
            // console .log('奇数')
            reject('失败')

        }
        },1000)
        console.log('promise封装代码执行完成')

     })
     promise.then((result)=>{
  console.log('then接收成功数据',result)
     })
     promise.catch((error)=>{
  console.log('catch接收失败数据',error)
     })
       
    </script>

promise ajax封装

    <script src="myajax.js"></script>
    <script>
        /*
        获取商品列表数据
        */
        let promise = new Promise(function (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和promise.catch 取数据，进行处理
        promise.then(result => {
            console.log(result)
        })
        promise.catch(error => {
            console.log(error)
        })


    </script>

    <script src="myajax.js"></script>
    <script>
        // 获取商品列表
        let promise=new Promise((resolve,reject)=>{
            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(error=>{
            console.log(error)
        })
    </script>

promise链式调用

比回调函数更好的更优雅的方法处理异步结果

有多个请求，后面请求需要用到前面请求的结果

使用回调函数，会出现回调嵌套(回调地狱问题)

回调地狱：

promise解决回调嵌套的问题

   <script src="myajax.js"></script>
    <script>
        /*
        封装一个函数获取promise对象，promise对象封装处理网络请求异步任务
        */
        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)
            })

    </script>

写项目时如何使用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=>{
失败
})

特点:

1.对象的状态不受外界影响。

2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending---->fulfilled和从pending------>rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）

promise的三种状态

pending（进行中）、fulfilled（已成功）和rejected（已失败）
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

<script>
            let promise=new Promise((resolve,reject)=>{//pendding进行中
        let num=Math.floor(Math.random()*10)
        console.log('num',num)
             // 成功与失败状态一旦形成就不会改变
        // 封装异步任务
        setTimeout(()=>{
            if(num%2==0){
            // console .log('偶数')
            resolve('成功')
        }else{
            // console .log('奇数')
            reject('失败')

        }
        },1000)
        console.log('promise封装代码执行完成')

     })
     promise.then((result)=>{
  console.log('then接收成功数据',result)
     })
     promise.catch((error)=>{
  console.log('catch接收失败数据',error)
     })
       

    </script>

类对象实例对象原型对象

class Person{

constructor（name，age）{

this.name=name

thia.age=age

}

say(){

//说话

}

let p1=new Person('jack',18)

类对象 Person

实例对象 new Person('jack',18)

原型对象 Person.prototype

new Promise().then().catch()

三种方法

Promise.all([promise1,promise2...])

=>promise对象包含数组中所有promise对象执行的结果

Promise.race([promise1,promise2....]).then(res=>{})

promise.reject('失败').catch(error=>())

promise.resolve('成功').catch(result=>())

<script src="./myajax.js"></script>
    <script>
        // 获取商品列表
        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]).then(res => console.log(res))

        // Promise.resolve('成功').then(res=>console.log(res))
        Promise.reject('失败').then(null,error=>console.log(error))

        // 满足条件返回promise对象
        function test(){
            if(true){
                // new Promise(()=>{ })
               return Promise.resolve('成功')
            }else{
                Promise.reject('失败')
            }
        }

本地存储 Storage

电脑硬盘存储化存储数据

电脑内存临时数据电脑关机或者程序终止而消失

localStorage对象

setTtem(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持久化存储的数据

    <script>
        function test2() {
            localStorage.setItem('obj',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]对象存储成功
        }
        // test2()
        function test1() {
            localStorage.setItem('num', 100)//向localStorage存为key为num值为100的一条数据
            localStorage.setItem('state', true)//向localStorage存为key为num值为100的一条数据
            let state = localStorage.getItem('state')

            let num1 = localStorage.getItem('num')
            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 newProduct = {
                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(newProduct)
            localStorage.setItem('list',JSON.stringify(list))

        }
        // test()

        function test3() {
            let newProduct1 = { 
                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(newProduct1)
            localStorage.setItem('list', JSON.stringify(list))

            // 添加第二条商品
            let newProduct2 = { 
                number: 1002, 
                name: 'vue高级编程', 
                url: './image/shoppingBg_03.jpg', 
                price: 100, 
                num: 0 }
            let list1 = localStorage.getItem('list') || '[]'
            list1 = JSON.parse(list1)
            list1.push(newProduct2)
            localStorage.setItem('list', JSON.stringify(list1))

        }
        // test3()
        
        
    </script>

TOTO come on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise的运用（语法，作用、特点、状态方法以及封装）、本地存储 Storage

Promise的运用（语法，作用、特点、状态方法以及封装）、本地存储 Storage
复制链接

扫一扫