Fetch API
用法
- 接口调用 的
fetch
用法
- 基本特性
- 与
ajax
相比,更加简单的数据获取方式,功能更强大,更灵活,可以看做是ajax
的升级版。- 基于
Promise
实现的
- 语法结构
<script> fetch(url).then(data=>{ return data.text(); }).then(ret=>{ // 这里得到的数据是最终的数据 console.log(ret); }) </script>
- 规则说明:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
- 基本用法
- 案例:
<body> <script type="text/javascript"> /* Fetch API 基本用法 */ fetch('http://localhost:3000/fdata').then((data)=>{ // text() 方法属于fetch API的一部分,他返回的是一个Promise 实例对象,用于获取后台数据的返回 return data.text(); }).then((data)=>{ console.log(data) }) </script> </body>
-
fetch
请求参数
常用选项配置
- method(String):HTTP请求方法。默认为GET
- body(String):HTTP请求参数
- headers(Obj):HTTP请求头,默认为
{}
GET
和DELETE
请求方式传参
示例:<script type="text/javascript"> // 注意:两种URL的传参方式 /* fetch('http://localhost:3000/books?id=123',{ method:'get', }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) */ fetch('http://localhost:3000/books/456',{ method:'get', }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) fetch('http://localhost:3000/books/789',{ method:'delete', }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) </script>
POST
请求方式传参
- 案例:
<script> // post fetch('http://localhost:3000/books/',{ method:'post', body:'uname=lisi&pwd=18', headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) // post json 格式 fetch('http://localhost:3000/books',{ method:'post', body:JSON.stringify({ uname:'lizhe', pwd:'456' }), headers:{ 'Content-Type':'application/json' } }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) </script>
PUT
请求方式传参
- 案例:
<script> // put fetch('http://localhost:3000/books/123',{ method:'put', body:JSON.stringify({ uname:'王麻子', pwd:'789' }), headers:{ 'Content-Type':'application/json' } }).then(data=>{ return data.text(); }).then(ret=>{ // 最终的数据 console.log(ret) }) </script>
fetch
响应结果
- 格式
text()
:将响应结果处理成字符串类型json()
:返回结果和JSON.parse(response.Text)一样- 案例:
<script> /* fetch 响应结果的数据格式 */ fetch('http://localhost:3000/json').then((data)=>{ // return data.json(); return data.text(); }).then((ret)=>{ console.log(ret); // console.log('uname='+ret.uname); var obj = JSON.parse(ret); console.log('uname='+ret.uname); }) </script>