## 1.fetch 1.post 請求 ~~~ fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ 'id': 10 }) }).then(response => response.json()).then((res_data)=>{ console.log(res_data) }).catch(error => { console.error('error') }) ~~~ ### 常見方法 Response 對象根據服務器返回的不同類型的數據，提供了不同的讀取方法。 其中最常用的就是`res.json()` | 方法 | 含義 | | --- | --- | | res.json() | 得到 JSON 對象 | | res.text() | 得到文本字符串 | | res.blob() | 得到二進制 Blob 對象 | | res.formData() | 得到 FormData 表單對象 | | res.arrayBuffer() | 得到二進制 ArrayBuffer 對象 | **基本語法1：**json格式（常用） ~~~js // 測試接口（新增操作）： // 接口地址：http://ajax-base-api-t.itheima.net/api/addbook // 請求方式：post // 請求體參數： // 1、書名：bookname // 2、作者：author // 3、出版社：publisher // post發送：json格式 async function add() { let obj = { bookname: '魔法書之如何快速學好前端', author: '茵蒂克絲', publisher: '格蘭芬多' } let res = await fetch('http://ajax-base-api-t.itheima.net/api/addbook', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(obj) }) let json = await res.json() console.log(json) } add() ~~~ **基本語法2：**x-www-form-urlencoded格式（了解） ~~~text async function add1() { let res = await fetch(url, { method: 'post', headers: { "Content-type": "application/x-www-form-urlencoded; charset=UTF-8", }, body: 'foo=bar&lorem=ipsum', }); let json = await res.json(); console.log(json) } add1() ~~~ **基本語法3：**formData格式（了解） ~~~text let form = document.querySelector('form'); async function add2() { let res = await fetch(url, { method: 'POST', body: new FormData(form) }) let json = await res.json() console.log(json) } add2() ~~~ ### fetch 函數封裝 **目標效果：** ~~~ // 發送get請求、delete請求 http({ method:'xxx' url:'xxx', params:{......} }) // 發送post請求、put請求、patch請求 http({ method:'xxx' url:'xxx', data:{......} }) ~~~ **封裝之后代碼如下：** ~~~ async function http(obj) { // 解構賦值 let { method, url, params, data } = obj // 判斷是否有params參數 // 1、如果有params參數，則把params對象轉換成 key=value&key=value的形式，并且拼接到url之后 // 2、如果沒有params參數，則不管 if (params) { // 把對象轉換成 key=value&key=value 的方法 // 固定寫法：new URLSearchParams(obj).toString() let str = new URLSearchParams(params).toString() // console.log(str) // 拼接到url上 url += '?' + str } // 最終的結果 let res // 判斷是否有data參數，如果有，則需要設置給body，否則不需要設置 console.log(data) if (data) { // 如果有data參數，此時直接設置 res = await fetch(url, { method: method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }) } else { res = await fetch(url) } return res.json() } ~~~ **使用方法：** ~~~ // 測試代碼1： // 請求方式：get // 接口地址：http://ajax-base-api-t.itheima.net/api/getbooks // 查詢參數(可選)： // 1、id:需要查詢的圖書id async function fn1() { let result1 = await http({ method: 'get', url: 'http://ajax-base-api-t.itheima.net/api/getbooks', params: { id: 1 } }) console.log(result1) } fn1() // 測試代碼2： // 請求方式：post // 接口地址：http://ajax-base-api-t.itheima.net/api/addbook // 請求體參數： // 1、書名：bookname // 2、作者：author // 3、出版社：publisher async function fn2() { let result2 = await http({ method: 'post', url: 'http://ajax-base-api-t.itheima.net/api/addbook', data: { bookname: '魔法書111', author: '嘻嘻', publisher: '哈哈哈' } }) console.log(result2) } fn2() ~~~ 原文 https://zhuanlan.zhihu.com/p/644596660