【JavaScript】fetch

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 核心语法

核心语法:

1. 如何发请求:

2. 如何处理响应:

3. 注:测试用接口

4. fetch函数的参数:

   1. 参数1:请求的url地址
   2. 参数2:以对象的形式设置请求相关的内容比如,方法,请求头,提交的数据等.

5. fetch获取到响应结果,需要如何解析:

fetch(资源地址,{...配置项对象})
.then(response=>{
    // 接收请求
})

fetch结合URLSearchParams发送get请求:

1. 使用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请求:

1. fetch发送get请求时,不需要设置请求方法,因为默认的就是get
2. URLSearchParams可以用来创建或者解析查询字符串,这里通过它将对象转为查询字符串

post请求-提交JSON

1. fetch发送post请求,提交JSON数据
2. 测试接口-用户注册

核心步骤:

1. 根据文档设置请求头
2. 通过配置项设置,请求方法,请求头,请求体

; (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

1. fetch函数的第二个参数可以设置请求头,请求方法,请求体,根据接口文档设置对应的内容即可
2. 可以通过JSON.stringify将对象转为JSON

post请求-提交FormData

需求:

1. fetch发送post请求,提交FormData数据(上传+回显)
2. 测试接口-上传图片

核心步骤:

1. 通过FormData添加文件
2. 通过配置项设置,请求方法,请求体(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

1. fetch提交FormData时不需要额外的设置请求头
2. 实例化FormData之后可以通过append(key,value)方法来动态添加数据