js fetch请求使用-蒲公英云

文章目录

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请求语法格式

语法格式：

用于response返回数据格式是json格式
fetch(url [,options]).then(rsp => {return rsp.json()}).then(data => {console.log(data)})
用于respnse返回数据格式为文本格式
fetch(url [,options]).then(rsp => {return rsp.text()}).then(data => {console.log(data)})
用来请求文件返回二进制流
fetch(url [,options]).then(rsp => {return rsp.blob()}).then(data => {console.log(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对象：JSON.stringify({'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('https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png').then(rsp => {
  return rsp.json()
}).then(d => {
  console.log(d) // d: 返回json数据
})

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

fetch('https://www.baidu.com').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('https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png').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)
})