fetch
Response
Headers
ajax&axios&fetch的关系:
ajax：ajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。
axios：axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它提供了更高级别的封装，使发送请求和处理响应更加简单和灵活。
fetch：fetch 是浏览器内置的 API，用于发送网络请求。它提供了一种现代化、基于 Promise 的方式来进行网络通信。用法和axios类似，但相比于 axios，它的功能和封装级别更为简单。
全局的fetch函数用来发起获取资源请求.他返回一个promise,这个promise会在请求响应后被resolve,并传回Response对象
fetch 核心语法
核心语法:
-
如何发请求:
-
如何处理响应:
-
注:测试用接口
-
fetch函数的参数:- 参数1:请求的url地址
- 参数2:以对象的形式设置请求相关的内容比如,方法,请求头,提交的数据等.
-
fetch获取到响应结果,需要如何解析:
fetch(资源地址,{...配置项对象})
.then(response=>{// 接收请求
})
fetch结合URLSearchParams发送get请求:
- 使用
fetch结合URLSearchParams调用地区查询接口
;(async function () {const params = new URLSearchParams({pname: '广东省',cname: '广州市'})const url = `http://hmajax.itheima.net/api/area?${params.toString()}`// fetch函数返回的是 Promise对象，通过await等待获取response对象const res = await fetch(url)// .json方法返回的是Promise对象 继续通过await等待const data = await res.json()
})()
这里也可以使用 .then 的 Promise 写法。
总结：
fetch结合URLSearchParams发送get请求:
fetch发送get请求时,不需要设置请求方法,因为默认的就是getURLSearchParams可以用来创建或者解析查询字符串,这里通过它将对象转为查询字符串
post请求-提交JSON
fetch发送post请求,提交JSON数据- 测试接口-用户注册
核心步骤:
- 根据文档设置请求头
- 通过配置项设置,请求方法,请求头,请求体
; (async function () {// 通过headers设置请求头const headers = new Headers()// 通过 content-type指定请求体数据格式headers.append('content-type', 'application/json')// 参数1 url// 参数2 请求配置const res = await fetch('http://hmajax.itheima.net/api/register', {method: 'post',// 请求方法headers, // 请求头// 请求体body: JSON.stringify({ username: 'itheima9876', password: '123456' })})const json = await res.json()console.log(json)
})()
总结：
post请求-提交JSON
fetch函数的第二个参数可以设置请求头,请求方法,请求体,根据接口文档设置对应的内容即可- 可以通过
JSON.stringify将对象转为JSON
post请求-提交FormData
需求:
fetch发送post请求,提交FormData数据(上传+回显)- 测试接口-上传图片
核心步骤:
- 通过
FormData添加文件 - 通过配置项设置,请求方法,请求体(
FormData不需要设置请求头)
<input type="file" class="file" accept="image/*"><script>document.querySelector('.file').addEventListener('change', async function (e) {// 生成FormData对象并添加数据const data = new FormData()data.append('img', this.files[0])const res = await fetch('http://hmajax.itheima.net/api/uploadimg', {method: 'post',body: data})const json = await res.json()console.log(json)})</script>
总结：
post请求-提交FormData
fetch提交FormData时不需要额外的设置请求头- 实例化
FormData之后可以通过append(key,value)方法来动态添加数据
