回调函数是什么?
- 当一个函数作为参数传入另一个参数中,并且不会立即执行,只有当满足一定条件后该函数才可以执行,这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数:
什么是回调地狱?
- 所谓的回调地狱指的是:回调函数的嵌套,也就是在一个回调函数中调用另一个回调函数;
Ajax程序是异步程序,如果将Ajax请求按照顺序写成并列形式;
那么所有的Ajax异步程序是同时触发执行的,不是按照顺序一个一个执行;
例如:
ajax请求1{
ajax请求2{
ajax请求3{ .... }
}
}
语法必须是嵌套形式的语法;
如何解决回调地狱问题?
- 我们希望异步程序语法形式是并列设定的语法形式,执行过程是按照顺序一个一个的执行;
解决办法: Promise语法 和 Async Await 配合解决;
希望是这样:
ajax请求1{}
ajax请求2{}
ajax请求3{}
....
Promise方法 :
- Promise是异步编程的一种解决方案.ES6新增的语法,专门解决回调地狱问题;,可以替代传统的解决方案------回调函数和事件。
- 但是单独的promise不能彻底的解决回调地狱; 一般需要 ES7 新增的 Async Await 配合解决;
- 语法形式:
promise语法固定套路:
const promise实例化对象 = new Promise( function( 参数1, 参数2 ){
需要执行的异步程序;
if( ){
执行成功 调用执行 参数1
参数1()
}else{
执行失败 调用执行 参数2
参数2()
}
})
promise实例化对象.then( function(){} )
通过promise实例化对象的then方法 给 参数1 赋值
promise实例化对象.catch( function(){} )
通过promise实例化对象的catch方法 给 参数2 赋值
async 和 await 是什么?
- 目的:为了配合promise封装的函数,实现解决回调地狱的问题;
- 利用 Async关键字的函数,是声明异步函数,返回值是promise对象,如果async关键字函数返回的不是promise,会自动用Promise.resolve( )包装。
- Await等待右侧表达式的结果,这个结果是promise对象或者其他值。
- 如果它等到的不是一个 promise 对象,那 await 表达式的运算结果就是它等到的东西。
- 如果它等到的是一个 promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
1.使用Async作为关键词声明函数;
2.在Async声明的函数中,使用 Await 调用 Promise 封装的函数;调用结果是 异步程序执行的响应体结果;
也就是不需要.then() .catch();它会直接根据响应体结果执行程序;
async function 函数(){
const 变量1 = await promise封装函数();
变量中存储的是 这次调用结果 也就是 响应体数据
const 变量2 = await promise封装函数();
const 变量3 = await promise封装函数();
const 变量4 = await promise封装函数();
在 async 中 使用 await 调用的 promise封装的程序
才会按照顺序 一个 一个的执行
}
cookie是什么?
- cookie 是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时,那么就可以通过 JavaScript 来创建和读取 Cookie。简单的就是浏览器提供的一项功能.JS只能使用不能修改功能语法;
- 不同的浏览器都有这项功能,但是不同浏览器存储cookie数据不相同;
- cookie也可以说是浏览器提供的一个公共存储空间,只要符合访问路径的文件都可以读取浏览器cookie存储的数据;
- 但是cookie是一个本地的文件,文件中存储了数据, JavaScript程序可以读取访问这些数据;
- 要运行cookie必须要通过服务器;
- cookie 的基本属性:
name
cookie的键名
value
cookie的键值
path
cookie的访问路径
只要符合cookie访问路径的文件 才能 读取cookie
/
根目录路径:
在 根目录中的文件可以访问cookie
实际项目中cookie一般的访问路径都是 / 根目录
文件夹路径:
在文件夹中的文件可以访问cookie
expires
cookie的时效
如果 cookie 不符合设定的时效 浏览器会自动删除cookie
session
会话时效
浏览器执行 cookie 存在
浏览器关闭 cookie 删除
年月日 时分秒
时间时效
时间超过 设定的时间时效 cookie自动删除
时间时效设定的是 服务器时间 也就是 世界标准时
document.cookie = '键名=键值;path=路径;expires=时间对象解析' ;
语法: document.cookie
获取结果是 cookie键值对 字符串 ;
mySetCookie( 'name' , '张三' , '/' );
mySetCookie( 'age' , '18' , '/' );
mySetCookie( 'sex' , '男' , '/' );
mySetCookie( 'addr' , '北京' , '/' );
const obj = myGetCookie();
console.log( obj );
window.localStorage 是什么?
- 概念: window.localStorage 是浏览器提供的本地存储功能;
- 操作语法:window.localStorage本质是一个对象;
- window.localStorage 支持JavaScript设定的localStorage 操作函数同时支持对象的操作语法;
localStorage 的语法操作:
设定:
window.localStorage.setItem( 键名 , 键值 );
window.localStorage.键名 = 键值 ;
获取:
const 变量 = window.localStorage.getItem( 键名 );
没有键名 获取结果是 null
const 变量 = window.localStorage.键名 ;
没有键名 获取结果是 undefined
删除 :
window.localStorage.removeItem( 键名 );
delete( window.localStorage.键名 );
清除:
window.localStorage.clear
window.localStorage 和 cookie 的区别 ?
1, cookie的执行 必须要通过服务器
localStorage的执行 本地运行就可以
2, cookie 有 时效性 超过时效自动删除
localStorage 没有 时效性 除非执行删除操作才能删除
3, cookie 有 路径 符合路径的文件才能访问
localStorage 路径不能修改 默认设定是 根目录路径
4, cookie 只能 存储 普通字符串 不能存储 对象 数组 函数 json字符串
localStorage 可以 存储 json字符串
也就是 localStorage 可以将 数组对象 转化为 json字符串 存储
5, cookie 一般存储数据量都比较小 一般浏览器存储4k
localStorage 一般存储数据量都比较大 一般浏览器存储4M
6, cookie 前端程序 后端程序都能操作
localStorage 只能 JavaScript操作
7, cookie 一般 存储 简单的数据片段
localStorage 一般存储复杂数据的json字符串
- cookie 和 localStorage 都是 本地存储数据;数据的安全性都比较低,它不会存储敏感数据;