js fetch请求使用

时间：2025-01-19 09:03:02

文章目录

  • 1、fetch请求语法格式
    • 1.1、fetch请求options参数说明
    • 1.2、fetch请求response返回json数据
    • 1.3、fetch请求返回text文本数据解析
    • 1.4、fetch请求返回blob二进制流解析文件
  • 2、fetch请求示例
    • 2.1、fetch发送get请求，url参数
    • 2.2、fetch发送post请求，formdata参数
    • 2.3、fetch发送post请求，json参数
  • 参考链接

1、fetch请求语法格式

语法格式：

  1. 用于response返回数据格式是json格式
    fetch(url [,options]).then(rsp => {return ()}).then(data => {(data)})
  2. 用于respnse返回数据格式为文本格式
    fetch(url [,options]).then(rsp => {return ()}).then(data => {(data)})
  3. 用来请求文件返回二进制流
    fetch(url [,options]).then(rsp => {return ()}).then(data => {(data)})

1.1、fetch请求options参数说明

说明：
  url：fetch请求的url地址
  options：request请求设置，部分参数说明
    options参数示例: 
      {
            'method': 'POST',  // 请求方式
            // 'body': 'a=1&b=2&c=3',  // url参数直接放入,content-type='application/x-www-form-urlencoded; charset=UTF-8'
            'body': JSON.stringify({'a':'1'}),     // 请求体为json对象：({'a':'1'}),content-type='application/json;chartset-UTF-8'
            'headers': {
              "accept": "*/*",
              "sec-fetch-dest": "empty",
              "sec-fetch-mode": "cors",
              "sec-fetch-site": "none",
              'content-type': 'application/x-www-form-urlencoded; charset=UTF-8'  // 内容类型
            }
      }

    options参数组合示例：
      1. 请求方式为POST请求、且内容类型为application/x-www-form-urlencoded，body请求体内容为FormData对象：
        var formData = new FormData()
        formData.append('a','1')
        formData.append('b','2')
        formData.append('c','3')
        formData.append('j',{'k':'v'})
        // ====> 结果
        // a=1&b=2&c=3&j={'k':'v'}
      2. 请求方式为POST请求、且内容类型为application/json，body请求体内容为JSON字符串：
        JSON.stringify({'a':'1'})

1.2、fetch请求response返回json数据

fetch('/release/blogv2/dist/pc/img/').then(rsp => {
  return rsp.json()
}).then(d => {
  console.log(d) // d: 返回json数据
})

1.3、fetch请求返回text文本数据解析

fetch('').then(rsp => {return rsp.text()}).then(d => {
  console.log(d) // d：返回html文本
  var dom = new DOMParse()
  let doc = dom.parseFromString(d, 'html/text') // 返回一个document对象
  // to do other dom element...
})

1.4、fetch请求返回blob二进制流解析文件

fetch('/release/blogv2/dist/pc/img/').then(rsp => {return rsp.blob()}).then(d => {
  var blob = d
  // 创建隐藏的可下载链接
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = URL.createObjectURL(blob)
  // 保存下来的文件名
  a.download = 'my_img' + '.jpg'
  document.body.appendChild(a)
  a.click()
  // 移除元素
  document.body.removeChild(a)
})

2、fetch请求示例

2.1、fetch发送get请求，url参数

fetch('http://localhost:8080/api/?a=1&b=2&c=3', {
	'method': 'GET',  // 请求方式
	'body': null, // GET请求不存在请求体body
	'headers': {
	  "accept": "*/*",
	  "sec-fetch-dest": "empty",
	  "sec-fetch-mode": "cors",
	  "sec-fetch-site": "none",
	  'content-type': 'application/json, text/plain, */*' // 请求内容类型
	}
}).then(rsp => {return rsp.json()}).then(data => {
  console.log(data)
})

2.2、fetch发送post请求，formdata参数

fetch('http://localhost:8080/api/xxx', {
	'method': 'POST',  // 请求方式
	'body': 'a=1&b=2&c=3', // POST请求请求体可有可无，参数也可以放到url上。表单参数必须放到请求体上，注意contentType类型
	'headers': {
	  "accept": "*/*",
	  "sec-fetch-dest": "empty",
	  "sec-fetch-mode": "cors",
	  "sec-fetch-site": "none",
	  'content-type': 'application/x-www-form-urlencoded; charset=UTF-8' // 请求内容类型
	}
}).then(rsp => {return rsp.json()}).then(data => {
  console.log(data)
})

2.3、fetch发送post请求，json参数

// 需要注意的就是参数：参数中间不能有空格，中文参数要使用encode编码
// 还要注意encodeURIComponent和encodeURI编码的区别（尤其是参数部分冒号的转码，具体可以看下参考链接）
let body = encodeURIComponent(JSON.stringify({'a':'1','b':'2','c':'3'}))

fetch('http://localhost:8080/api/xxx', {
	'method': 'POST',  // 请求方式
	'body': body, // POST请求发送json参数，json参数必须放到请求体上，通过http输入流读取。注意contentType类型
	'headers': {
	  "accept": "*/*",
	  "sec-fetch-dest": "empty",
	  "sec-fetch-mode": "cors",
	  "sec-fetch-site": "none",
	  'content-type': 'application/json; charset=UTF-8' // 请求内容类型
	}
}).then(rsp => {return rsp.json()}).then(data => {
  console.log(data)
})

参考链接

encodeURI()、encodeURIComponent()区别及使用场景

相关文章