素材巴巴 > 程序开发 >

java axjs webservice_js前后端交互

程序开发 2023-09-05 10:21:54

1.前后端交互模式

68f724bad5a33d9a9f6bd2ca7369ecb7.png

ea1086fe0ea8b0f2e032f86e6a36f9a6.png

f90b0bea782fc14eee69032887ae89fb.png

2.promise用法

(1)异步调用

e740e8f93b900e1f3c1433492dca1863.png

(2)ajax回顾

00cb2e52fcfc618c60b67b36ee624f5d.png

0adadc496886f2c741a12cbc36fc1ae8.png

(3).promise

优点：可以解决回调地狱(多层异步调用嵌套问题)(解决代码可读性低的问题)

提供简洁的api

152c464d9989d2eab2b4de2493745ed6.png

(4)promise基本类型：是Function

8b8aa708fe36b382ee5efcee4fdd299e.png

36e6ab8afc4cd89e78f522ec88ffe371.png

e1786b5c47fbbc0a8031c513cfb78f70.png

(5)promise基本用法

d3be3d100763a32c63f2ee005e09c0b2.png

c00f7d894263ce2b1fe7b035884a8b4a.png

3。基于promise处理ajax请求

83eedee21d87475da00273f022b5ca7f.png

(1)promise发送多次ajax请求

cf7f447b06b035e06f7435ccd86e2f85.png

3c0a4213df29740bb21a26a0b34f4314.png

4。then参数中的函数返回值

e095b3471037fc2fa67433dec88cffd2.png

8b5a743763c4603cc9f6abc59ba7554d.png

5.promise常用的api

(1)实例方法

9f94073767b754bbf4a3acb7ebe9bd71.png

9c4d4827093ad5820fe2ea7886d49846.png

1afdda6c7eb6358c12aa883a73743387.png

4f6747bc84fa7477ada0bf081c27c37b.png

(2)对象方法

253b62c54a411ba78b1aca16379f46d1.png

253b62c54a411ba78b1aca16379f46d1.png

dca987468735ceb48c3be5ad605368f2.png

fbe7c575e34fab3193f3b0dddb5a278f.png

36b602fbaf4a23f0087fd556490c6bb1.png

6.接口调用-fetch用法

3408fb59e73cea2632e617bf4b1e841a.png

158b50f9f5cf433425e8eadf858bcfce.png

e0405aca13893e9a1cfef524ff2e9d96.png

7。fetch请求参数

(1)get请求方式

939dc7b5ab7c8dfbf164a7d08397f7d5.png

51e9e012d6b2b9c94bc07fcec2ef35f4.png

027ae6f524de3ef79a5f426a27d2dc0a.png

7820148ed861aa6912642576d5ced88c.png

(2)delect请求方式

2031f458291047b8f9a6ba84115fce4b.png

2e6f9438f2df48e45007b9d6ed467839.png

788959af53039c29aea8661cfe0aac35.png

(3)post请求方式的参数传递

5f731dc5804987aee6c7793b6381258b.png

d71adc692305132fb00856d3b34e7f62.png

f5c5370cb2dcd5fa605c1c4d8455cf19.png

(4)。put请求方式的参数传递(和post用法一致)

17281b3ca759b7b7f9a52aaee7b9cb9a.png

69d807dc99e2a299093f806d43dc4959.png

08954de6e558c9251bf71e77cb0391c6.png

8。fetch响应结果

3dc40ff48c6620f58b01ec0ba536c45a.png

1d3c7ae8d0f690cc97827b0033ccc410.png

6e671722b6b15d05463d6644ea8a4d5a.png

9。接口调用-axios用法

(1)axios的基本特性

44c1f4fcc456eb2c334710017e361919.png

(2) axios的基本用法

bb7ffc72131e37fa2ee5da01e76f98d4.png

7d25b2dd6899777ed3f06098ad6a3067.png

94e52ed7f7a36223af000f8168d06c9c.png

02a68991fc35518ed0befbf92d0e82b2.png

(3) axios的常用api(get和delete请求方式差不多)

1600f04d693c143cf4dd448107629cc5.png

de8cf3c9268920957df311a33582ddd1.png

6c40ced34963611a7517f57256b533c8.png

32d7ed5cb5d2bcabfb730fa7a8e8509c.png

(4)axios的参数post传递(post和put相似)

8a47eb936384a98ff391728f692b9154.png

a014f3dc1d474a0054803283fcf487fa.png

c3ad1df7706baf4687c38c29cde47116.png

5c6643657e5320093296be694cc66fbd.png

df500ace179b73c743df2c390a86a5b9.png

85e05e138bd396be7d4053f8099672bc.png

7b7620bdb8ce373eef666eb52506d522.png

bbc92e77c4110c4c38175bf8735aa086.png

bdc4f4a44cdef63a53178c1e62915cb8.png

3dfb2c9d2460bbca9dd60338b97ab4e2.png

10.axios的响应结果

48012b01a09c8d8fd78d5a60d1c0915c.png

db7ccf88e3aa035d3ceeb1d22518a535.png

bc4e0fe6efb9754dd3aa69052dbfbde1.png

aadc9edecc09843d53dc9d54e1b5b66e.png

746cd5cf530b6b3d0517cb1025a3a54a.png

ac4f15ea2748eae4759654cbc925c68f.png

2d6c0af052958c08d8a41f732fe50355.png

e179c932f9b027a63021938205ccc0e7.png

11.axios拦截器

(1)请求拦截器

c3c6213b877023d6015ee4ff24f62982.png

cfec964ea3631bff7fd9c575f8a4172e.png

a4b3219f670bf5c89776d2003c1113bf.png

12.接口调用-async/await的用法

(1)基本用法

5920b39f68828f13a0a921a69318b612.png

484e2c78dab7f84b60916f2247e8917f.png

(2)async/await处理多个异步请求

f6d6213dab5adaf41db4b46f6b53c800.png

3f33b76f361927d32560fda9da39513f.png

8e57829a89843071fca319d3c92440fa.png

13.基于接口的案例

1fd69dce0ed5f623b0a8efc1b0cc175c.png

6c79433bf069a1780042c2be406aef76.png

6dfde8e59f183a35d52dba31cb3d1026.png

ed4201b0195fd8bcd67c070f5f1364b5.png

08021663ffda6a7c0f2c3c637b25dea7.png

5c0e4d72a39d102877a6155746a7f0c0.png

306966ffb8bca4f5cb849fbc92b47405.png

269878492661db850e847606ea7a8a48.png

73764927b9255f8beba643b1fa2d0be6.png

184e1ecc996694e45ce8ce3fc2e90425.png

b6c9ffc67cadc4f311143bbabdee8f46.png

2490e9bac679df18833512551fac9758.png

320e0ef40e35e90372fa2f994fd85e7e.png


标签：

上一篇： nodejs 编译 报FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 下一篇：

相关文章

    无相关信息
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号：备案中。