fetch和axios一起用会互相阻塞 fetch与ajax

转载

技术极客领袖 2024-07-31 13:39:46

文章标签 fetch和axios一起用会互相阻塞服务器 json 跨域 文章分类 iOS 移动开发

js传统的浏览器异步功能用XMLHttpRequest来实现。

现在的浏览器原生js倾向于用fetch来和服务器交互数据。

现实中，很多开发者用axios来实现，他们也都建议，初学者从fetch学起。

fetch用于向资源发起一个请求，收到并处理回应。

基本用法： fetch(url地址)

这个函数返回的是一个promise。promise的概念跟异步相关，感兴趣的同学可以去研究，不熟悉的看下面用法就好。

此处列举三处资源：

1、页面相同位置的资源文件“g.txt”。

2、互联网上get方式访问的webapi，“http://123.60.97.235:9999/api/Person/GetDouble?n=101”。其中，最后的n=101表示传递过去一个变量n，值是数字101。这个webapi会把传上去的数字翻倍返回。

3、互联网上post方式访问的webapi，“http://123.60.97.235:9999/api/Person/GetPerson”。用json格式，在body中发送一个学生对象作为参数（形如：{xm:"张三",cj:64}，姓名张三，成绩64）。服务器对数据进行处理，返回json字符串，在姓名前加上hello，把成绩开方乘10。

本地文本文件很简单

g.txt里只有一行文字“wahaha”。可以把g.txt的内容修改为对象，尝试解析（例如 [{"xm":"zs","nl":20,"birth":"2000-1-1"},{"xm":"ls","nl":18,"birth":"2000-2-2"}]

界面html：

1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <script src="js/1.js"></script>
 7     </head>
 8     <body>
 9         <input type="button" value="一" onclick="f1()"/>
10         <input type="button" value="二" onclick="f2()"/>
11         <input type="button" value="三" onclick="f3()"/>
12     </body>
13 </html>

对应js：

1 function f1() {
 2     myurl1 = "http://127.0.0.1:8848/w1/g.txt";    
 3     fetch(myurl1)
 4         .then(r => r.text())
 5         .then(r => console.log(r));
 6 }
 7 
 8 function f2() {
 9     myurl2 = "http://101.43.217.127:9999/api/Person/GetDouble?n=101";
10     fetch(myurl2)
11         .then(r =>r.text())
12         .then(r => console.log(r));
13 }
14 
15 function f3() {
16     myurl3 = "http://101.43.217.127:9999/api/Person/GetModel";
17     mydata = JSON.stringify({xm:"张三",cj:80});
18     fetch(myurl3, {
19         method: "post",
20         headers: new Headers({
21                 'Content-Type':'application/json'
22             }),
23         body: mydata
24     })
25         .then(r => r.json())
26         .then(r => console.log(r["xm"]+"----"+r["cj"]));
27 }

若以上WebApi已不可用，可自行在网上查找可用的资源。如：https://jsonplaceholder.typicode.com/guide/

说明：

1、所有的fetch后面，都跟了两个then。这与异步知识有关。简单理解，拿到了资源之后，需要处理才可以使用。文本资源，用参数的text()函数获得内容。json资源，用json()函数获取对象。在下一个then中，才能使用这些内容。

2、post相对复杂。第17行用于准备上传的对象，并处理成json字符串。18-24行的花括号，用于设置请求资源的各种参数。19行标识提交数据的方式，20-21行指出传给服务器的是一个用于程序交换数据的json字符串，23行的body里面是要上传的json数据。

3、代码中的箭头函数（又叫拉姆达表达式），其实是匿名函数的一种简写。形如 r => console.log(r) 的写法，其实就是 function

4、服务器端程序，各种主流语言都可以写。大家可以自行尝试。

ps：服务器程序和web页面不在同一个地方（相同域名、端口），需要关注同源/跨域问题。服务器端必须允许跨域访问，fetch才可以正常工作。fetch中可以在第二个参数里增加‘mode’来表示跨域（页面用"cors"表示跨域了，服务器不允许，也做不了事）。此处测试服务器已经设置把所有请求视为同源（ c#代码，builder.AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin();

运行效果：

fetch和axios一起用会互相阻塞 fetch与ajax_跨域