发布于 2021-04-12  371 次阅读

每日学习 # 4-12

今天上午起的有点晚，大概十点半左右到工作室，上午就继续做练习，上午主要是回忆了一下子组件向父组件传值的部分。

下午继续做练习，之后做作业

作业真的麻烦，老师让我们做生态包装设计，我一个数字媒体的搞起了生态包装设计，然后和同僚们讨论一下要怎么办。

之后我把之前的图床什么的都搞好了，用的阿里云oss，一年九块钱40个g，对我来说够用了吧(:з」∠)

晚上开始学习vue的前后端交互部分，promise

有四种调用接口的方式

  • 原生ajax
  • 基于jq的ajax
  • fetch
  • axios

由于jq的侧重点是dom操作部分，而vue方面不需要太多的调用dom操作

Fetch是vue的调用接口方式

axios是第三方插件库

url路径差别

image-20210412202045821

这里需要知道路径path是技术昂不一定是真实的嵌套路径，实际上是虚拟的，是用于区分不同的资源。

同时学习了新型的restful地址路径

image-20210412202157942

这个新型路径主要是负责增删改查

第一和第二url地址虽然一样，但请求方式不同

第三和第四url地址也一样，但请求方式不同

restful可以直接通过“/”传输参数，

就好像④，就是直接删除books底下的123

promise

promise是es6专门引入的一种方法，主要是用来解决异步编程问题的

機器產生的替代文字: 2.1

异步主要是用来处理定时任务、ajax、事件函数

我们稍微来回顾一下异步编程

首先

直接提供一个后端接口

機器產生的替代文字: express - require( ' express ) 4 Il 19 Iconst const const app - express() bodyParser require( 'body-parser') OPTIONS ' ) ; app _ use(express _ static( 'public' ) ) app _ use(bmiyparser . j son()); app _ use(bcniyparser extended: false D); app _ all ( • function (req. res. next) res . header ("Access -Control -Al low -Origin" , res _ header( ' Access -Control -Al ' res . header ("Access-Control -Al low -Headers" res . header( ' Access-control -Allow-Headers' , next(); app _ get( ' 'data', (req. res) res. send( 'Hello World! app _ ( ) console. log( ' running.. 'PUT, GET, POST, DELETE, "X -Requested-With"); 'Content-Type • ) ;

重点关注的是这个

機器產生的替代文字: 19 (red res) app _ get( • 'data ' res. send( 'Hello World! app _ listen(3øøa, ( ) console. log( ' running..

启动的方式，

機器產生的替代文字: 10. O. •10, (c) 2018 Hicrosoft Corporation, ; '•JLymAcode'utyapi)nodeItLn index. _js I. 18. (nodeILLnl Zo restart at anv title, enter rs (nodeILLnl 'Nazcb'.ng; node index.

在cmd里面 启动这个路由

前端部分ajax的写法

機器產生的替代文字: U head) body (script (script urI: success: -Function(data) c sole _ log(data) e/ script)

在Network里面刷新之后就能看到传回来的数据

機器產生的替代文字: Security LJ Hide JS 'mg Font WS Mwf"t Timing 'e. d its

接下来我们改进一下

機器產生的替代文字: chead' emeta (title Uhead) body (script type." text/ javascript" (script var ret — urI: success: -Function(data) ret — data; console _ log(ret) e/ script) / body) e /htmb

但这样并不会输出出来

機器產生的替代文字:

这是因为异步编程的影响，

機器產生的替代文字: var ret — urI: 'http://localhost:3øøø/data', success: -Function(data) ret — data; console _ log(ret) console _ log(ret)

如果是这样打印，那就是有值的

同理所得

多次异步调用，其输出的循序是不一定的，而是哪个回来比较快，显示哪一个在前面

范例

機器產生的替代文字: 19 28 app _ get( • /data ' (req. res) res. send( 'Hello World! • ) app _ get( ' "datal', (req. res) setTimeout(func res. send( 'Hello 'j app _ get( /data2', (req. res) res. send( 'Hello JERRY! • ) app _ listen(3øøa, ( ) console. log( ' running..

我们创建多个，并让其延时，

同时我们多次调用

機器產生的替代文字: // console. log(ret) urI: 'http://localhost:3øøø/data', success: function(data) console . log(data) urI: 'http://localhost:3øøø/dataI', success: function(data) -f urI: 'http://localhost:3øøø/data2', success: function(data) console . log(data) «/script)

就能看出差别

所以

機器產生的替代文字: 2.1 @ Ajax

如果异步调用结果存在依赖需求，我们就对其进行嵌套操作

機器產生的替代文字: urI: 'http://localhost:3øøø/data', success: function(data) -l console _ log(data) urI: 'http://localhost:3øøø/dataI', success: function(data) -f console . log(data) urI: - 'http://localhost:S"øøø,•'dS+S2ti""" - success: - function(data)

这样就能按照需要按照需求输出结果了

但这样嵌套多层之后，十分不好处理，这也被称之为回调地狱，

所以在此提出了promise的做法，

機器產生的替代文字: 2.2 Promise Promise Promise https://deve10per.mozi11a.org/en—Us/docs/web/Javascript/Reference/G10ba1 objects/promjts

。promise解决了多层嵌套导致的问题，同时也更为简洁

结尾

在最后备注一下这里的链接，都是网页上的

赏

一个在痛苦与迷茫中行走的人偶