fetch概述
1.基本特性
+ 更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。
+ 基于Promise实现
2.语法结构
fetch(url).then(fn1)
.then(fn2)
....
.catch(fn)
案例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 11 </body> 12 <script> 13 fetch('http://localhost:3000/a1') 14 .then(res => { 15 console.log(res) 16 return res.text() 17 }) 18 .then(res => { 19 console.log(res) 20 }) 21 </script> 22 </html>
fetch 请求参数
1.常用配置选项
+ method(string): HTTP请求方法，默认为GET，（GET， POST， PUT， DELETE）
+ body(string)： HTTP的请求参数
+ headers(object)： HTTP的请求头，默认为{}
2.get请求
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <title>Document</title> 6 </head> 7 8 <body> 9 10 </body> 11 <script> 12 // 传统的URL传递参数 13 fetch('http://localhost:3000/books?id=1231231231', { 14 method: 'get' 15 }).then(res => res.text()) 16 .then(res => console.log(res)) 17 18 // restful形式的URL传递参数 19 fetch('http://localhost:3000/books1/66666666666', { 20 method: 'get' 21 }).then(res => res.text()) 22 .then(res => console.log(res)) 23 </script> 24 25 </html>
3.post请求
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <body> 12 13 </body> 14 <script> 15 16 // url 格式 17 fetch('http://localhost:3000/test1', { 18 method: 'post', 19 headers: { 20 'Content-Type': 'application/x-www-form-urlencoded' 21 }, 22 body: 'name=zhangsan&id=1231231231312' 23 }).then(res => res.json()) 24 .then(res => console.log(res)) 25 26 // json 格式 27 fetch('http://localhost:3000/test2', { 28 method: 'post', 29 headers: { 30 'Content-Type': 'application/json' 31 }, 32 body: JSON.stringify({ 33 name: 'zhangsan', 34 age: '18' 35 }) 36 }).then(res => res.json()) 37 .then(res => console.log(res)) 38 </script> 39 40 </html>
4.PUT 请求
PUT 的请求与POST相似。