js fetch使用 & 参数

1. 关于fetch的options参数

语法格式：
fetch(url [,options]).then(rsp => {
    
    return rsp.json()}).then(data => {
    
    console.log(data)})

说明：
  url：fetch请求的url地址
  options：request请求设置，部分参数说明
    示例: 
      {
    
    
            'method': 'POST',  // 请求方式
            // 'body': 'a=1&b=2&c=3',  // 请求体 <=== formData，对象直接放入
            'body': formData,     // 请求体为json对象：JSON.stringify({'a':'1'})
            '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参数组合示例：
      请求方式为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'}
      请求方式为POST请求、且内容类型为application/json，body请求体内容为JSON字符串：
        JSON.stringify({
    
    'a':'1'})

2. 请求页面html（获取文本资源）

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...
})

3 请求json数据

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

4. 请求返回对象

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)
})