# 3、接口调用-fetch用法 * [1.基本特性](https://www.kancloud.cn/zheng1234/vuejs/2393790#1_2) * [2.语法结构](https://www.kancloud.cn/zheng1234/vuejs/2393790#2_5) * [3.2 fetch的基本用法](https://www.kancloud.cn/zheng1234/vuejs/2393790#32_fetch_14) * [fetch的基本用法 代码分析](https://www.kancloud.cn/zheng1234/vuejs/2393790#fetch___23) * [3.3 fetch请求参数](https://www.kancloud.cn/zheng1234/vuejs/2393790#33_fetch_35) * [1.常用配置选项](https://www.kancloud.cn/zheng1234/vuejs/2393790#1_36) * [2\. GET请求方式的参数传递 （获取）](https://www.kancloud.cn/zheng1234/vuejs/2393790#2_GET____53) * [3\. DELETE请求方式的参数传递 （删除）](https://www.kancloud.cn/zheng1234/vuejs/2393790#3_DELETE____89) * [4\. POST请求方式的参数传递 （上传）](https://www.kancloud.cn/zheng1234/vuejs/2393790#4_POST_____112) * [5\. PUT请求方式的参数传递 (修改)](https://www.kancloud.cn/zheng1234/vuejs/2393790#5_PUT_____182) * [3.4 fetch响应结果](https://www.kancloud.cn/zheng1234/vuejs/2393790#34_fetch_222) * [响应数据格式](https://www.kancloud.cn/zheng1234/vuejs/2393790#_223) 3.1 fetch概述 # 1.基本特性 ● 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版 ● 基于Promise实现 # 2.语法结构 ~~~ fetch(url).then(fn2) .then(fn3) ... .then(fn) ~~~ 规则说明：[https://developer.mozilla.org/en-US/docs/Web/API/Fetch\_API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) # 3.2 fetch的基本用法 ~~~ fetch(' /abc').then (datar> { return data.text () ; }).then (ret=> { //注意这里得到的才是最终的数据 console.log(ret) ; }) ; ~~~ ## fetch的基本用法 代码分析 ~~~ <script type="text/javascript"> //接口调用-fetch用法 // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 fetch('http://127.0.0.1:3000/fdata').then(function(data) { return data.text(); }).then(function(data) { console.log(data) }) ~~~ # 3.3 fetch请求参数 ## 1.常用配置选项 ~~~ 1.method(String):HTTP请求方法，默认为GET(GET、POST、PUT、DELETE) 2.body(String):HTTP的请求参数 3.headers(Object):HTTP的请求头，默认为{ } ~~~ ~~~ fetch(' /abc'，{ method: 'get' }) . then (data=> { return data. text() ; }) . then(ret=> { //注意这里得到的才是最终的数据 console.log(ret) ; }) ; ~~~ ## 2\. GET请求方式的参数传递 （获取） ~~~ fetch( '/abc?id=123') . then(data=> { return data. text () ; }) . then (ret=> { // 注意这里得到的才是 最终的数据 console.log(ret) ; }) ; ~~~  分析 ~~~ // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据 1.传统的url传递参数 fetch('http://127.0.0.1:3000/books?id=123',{ method:'get' }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }) 2.Restful形式的url传递参数 fetch('http://127.0.0.1:3000/books/456',{ method:'get' }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }) ~~~ ## 3\. DELETE请求方式的参数传递 （删除） ~~~ fetch( '/abc/123'， { method: 'dele te' }) . then (data=> { return data. text() ; }) . then (ret=> { //注意这里得到的才是最终的数据 console.log (ret) ; }) ; ~~~ 代码分析 ~~~ fetch('http://127.0.0.1:3000/books/789',{ method:'delete' }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }) ~~~ ## 4\. POST请求方式的参数传递 （上传） ~~~ fetch( '/books'， { method: 'post' ， body: 'uname= lisi&pwd=123'， headers: { 'Content-Type' : ' appli cation/x-www- form-urlencoded '， }) . then (data=> { return data. text() ; }) . then(ret=>{ console. log(ret) ; }) ; ~~~ 第二种 ~~~ fetch( :/books' , { method: 'post' , body: JSON. stringify({ uname :'lisi', age: 12 }) headers: { 'Content-Type': ' application/json、 ， } }) . then (data=> { return data. text() ; }) . then(ret=> { console.log(ret) ; }) ; ~~~ 代码分析 ~~~ fetch('http://127.0.0.1:3000/books',{ method:'post', body:'uname=lisi&pwd=123', headers:{ 'Content-Type':'application/x-www-form-urlencoded' } }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }) ~~~ 第二种 ~~~ fetch('http://127.0.0.1:3000/books',{ method:'post', body:JSON.stringify({ uname:'张三', pwd:'456' }), headers:{ 'Content-Type':'application/json' } }) .then(function(data){ return data.text(); }).then(function(data){ console.log(data) }) ~~~ ## 5\. PUT请求方式的参数传递 (修改) ~~~ 5. PUT请求方式的参数传递 fetch( '/books/123' , { method :'put' body: JSON. stringify({ uname :'lisi' , age: 12 }) headers: { 'Content-Type': ' application/json '， }) . then (data=> { return data. text() ; }) . then (ret=> { console. log (ret) ; }) ; ~~~ 代码分析 ~~~ fetch('http://127.0.0.1:3000/books/123', { method: 'put', body: JSON.stringify({ uname: '张三', pwd: '789' }), headers: { 'Content-Type': 'application/json' } }) .then(function(data) { return data.text(); }).then(function(data) { console.log(data) }) ~~~ # 3.4 fetch响应结果 ## 响应数据格式 ● text():将返回体处理成字符串类型 ● json(:返回结果和JSON.parse(responseText)一样 ~~~ fetch(' /abc' then (data=> { // return data. text () ; return data.json() ; }) . then (ret=> { console.log(ret) ; }) ; ~~~ 代码分析 ~~~ //Fetch相应结果的数据格式 fetch('http://127.0.0.1:3000/json').then(function(data) { //return data.json(); return data.text(); }).then(function(data) { //console.log(data.uname) //console.log(typeof data)//steing var obj = JSON.parse(data); console.log(obj) console.log(obj.uname, obj.age, obj.gender) }) ~~~