誉天程序员-2301-3-day04

文章介绍了Promise作为ES6解决异步编程的机制,以及axios在实际工作流程中的应用。同时阐述了网站的同源策略和跨域问题及其解决方案,并提及封装JavaScript工具类的基本步骤。此外,文章还提出了SSO单点登录和Vuex的状态管理库作为作业话题。
摘要由CSDN通过智能技术生成

知识回归

表达的方式

3w1h,5w1h
why(为什么)、what(定义)、where(场景、在哪用)、how(怎么用,分析,步骤-复杂问题简单)
表述一个问题时,就这种方式,这种套路。

1、简述Promise异步编程的方式

(why)
前后端访问,早期查询串
http://localhost:8080/user?id=123
一个参数id,它的值123
https://editor.csdn.net/md?not_checkout=1&spm=1001.2101.3001.4503&articleId=131910050
规则:第一个参数是?,后面所以的参数都是使用&
第一个参数not_checkout,值1

最简单最直接,url就看出来了,缺点信息暴露(不安全),浏览器对url长度是有限制(256字符数)
早期,form表单提交,在html中 参数input/check/radio/select,只会提交表单标签中的这些数据。最终还是拼成上面的字符串,但是这个用户是无法从浏览器上去查看的。
表单提交是刷新整个页面,重新刷新页面,或者转到新的页面。意味着整个页面要重新加载。时间长。

现在主流ajax,局部刷新,不会去刷新(更新)整个页面,只一部分div,进行更新。性能高,页面不会晃动。
这是SPA单页面开发基石。

ajax它是请求后台,后台要返回数据。它通过callback回调,如果结构比较复杂,回调比较多,它又是同步,产生回调地狱。

(what)
ES6javascript规范,它就推出新的api,Promise异步,得到结果订阅。不用等。
(how)
Promise异步调用它的一些列规定。api,成功时订阅then(),失败时订阅catch(),不管成功还是失败都执行finally()
(where)
Vue框架又封装了ajax,支持Promise,它叫axios。

2、简述axios的工作流程

第一步:安装
第二步:导入 import
第三步:Login().then().catch().finally()

3、什么是网站的同源策略以及什么是跨域

(what,why)
同源策略,同源是3个要素,它是浏览器网景,提出安全策略。它会限制本网站不能去访问其他网站资源。
3要素:a.协议,b.域名,c.端口
http://www.jd.com
协议(http://),域名(www.jd.com),端口(80)
https://www.taobao.com
协议(https://),域名(主域名www.taobao.com),端口(80)

https://list.jd.com/list.html?cat=1620
jd.com(一级域名)
list.jd.com(二级域名)
https://jr.jd.com/
(二级域名)
域名就是IP地址。本机域名localhost,IP:127.0.0.1

(where)
跨域:不能访问别人资源,其他网站,后台系统
前台访问后台,它们的端口不同,前台:http://localhost:5173,后台:http://localhost:6060。它们不是同源,因为端口。

(how)
跨域,需要后台支持,

4、如何封装一个js工具类

1)把代码写到单独js,tools/utils.js
2)export导出函数
3)在调用出import导入
4)调用方法

作业

1、SSO单点登录
2、什么是Vuex?
使用方式3w1h表述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值