## 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