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>
