JS promise

最新推荐文章于 2025-02-21 10:26:38 发布

原创最新推荐文章于 2025-02-21 10:26:38 发布

· 145 阅读

1 ·

版权

文章标签：

#javascript #前端 #开发语言

本文探讨了异步操作的解决方案，如回调函数、Promise和async/await的使用，以及Cookie的工作原理和在HTTP协议中的作用。重点讲解了如何处理异步任务返回结果和Cookie的存储与管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.异步与同步

同步操作: 当一个操作开始执行后，主程序需等待它的完成，才能继续向下执行。

异步操作:
当一个操作开始执行后，主程序无需等待它的完成，可以继续向下执行。
此时该操作可以跟主程序同时（并发）执行。

问题：异步任务完成后返回结果处理问题?
解决办法：回调函数 (回调函数可以解决异步任务问题)

2.回调函数

将函数callBack作为参数传给函数fun, 在函数fun中以形参方式进行调用, 函数callBack就称为回调函数

3.Promise

promise是对异步操作的封装，封装异步文件读写， ajax异步网络请求…

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

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

const promise new Promise(function(resolve,reject){
//..some code
if(/*异步操作成功*/){
resolve(value);
else{
reject(error);
}
});

ajax封装

function myPromise(options) {
    return new Promise((resovle, reject) => {
        const xhr = new window.XMLHttpRequest()
        let params = formatParmas(options.data) //uid=101
        let method = options.method.toUpperCase()
        if (method == 'GET') {
            xhr.open(method, options.url + '?' + params)
            xhr.send()
        } else if (method == 'POST') {
            xhr.open(method, options.url)
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(params)
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    let data = xhr.responseText
                    data = JSON.parse(data)
                    resovle(data)
                } else {
                    reject('网络请求失败')
                }
            }
        }
    })

}
// myPromise({
//     method:'get',
//     date:{

//     },
//     url:''
// })

4.async/await

使用方式:
- async关键字写在函数头部，表示该函数是一个异步执行的函数
- await关键字表示等待的意思，只能用在async异步函数中，后面跟promise对象
=> 等待promise封装的异步操作执行完，返回结果

//表示当前函数是一个异步执行函数
async function getList(){
try{
conso1e.1og('异步函数开始执行111')
let res =await myPromise({method:'get',url:'http://localhost:8089/api/
console.1og("异步函数获取到结果222'，res)
}catch(err){
console.log(err)
}
}
conso1e.1og('主程序结束执行>>>')

5.Cookie

cookie 是一个以字符串的形式存储数据的位置
也可以理解为存储数据的一个区域或者说是空间

cookie是以字符串的形式存储，在字符串中以key=value的形式出现
每一个key=value是一条数据
多个数据之间以；分割

//cookie的形态
'a=100;b=200;c=300;'

1.存储大小有限制，一般是4KB左右
2.数量有限制，一般是50条左右
3.有时效性，也就是有过期时间，一般是会话级别（也就是浏览器关闭就过期了）
4.有域名限制，也就是说谁设置的谁才能读取

语法:document.cookie = 'a=100;expires=时间对象'
     document.cookie = 'b=200;expires=Thu, 18 Dec 2018 12:00:00 GMT";'

设置cookie


*setCookie用于设置cookie
*@param{STRING]key要设置的cookie名称
*@param{STRING]value要设置的cookie内容
*@param{NUMBER}expires过期时间
*/
function setCookie (key,value,expires){
const time new Date()
time,setTime(time.getTime()-1000*60*60*8+expires)//用于设置过期时间
document.cookie ='${key}=${value};expires=${time);
}

cookie使用的是世界标准时间，而我们使用的new Date()则是我们自己的时间，也就是中国所在时区的时间，+8时区
我们需要减去这8个小时在设置cookie时间，才是我们正确设置的时间。

读取cookie

/*
*getCookie获取cookie中的某一个属性
*@param{STRING)key你要查间的cookie属性
*@return{STRING}你要查询的那个cookie属性的值
*/
function getCookie(key){
const cookieArr document.cookie.split(';)/a=100;b=200;c=300
//[a=100,b=200,c=308]
let value =''
                                      
cookieArr.forEach(item ->/item->a-100
if (item.split('-')[0].trim()==key){
value =item.split('=')[1]
}
})
return value
}

删除cookie

/**
*delCookie删除cookie中的某一个属性
*param{STRING}name你要除的某-个cookie属性的名称
*/
function delCookie(name){
setCookie(name,1,-1)
}
把时间-1

与http协议关系

每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
也就是说，cookie 是不需要我们手动设置，就会自动在客户端和服务端之间游走的数据
我们只是需要设置一下 cookie 的内容就可以