js fetch请求使用

痛定思痛。 2023-10-10 14:54 64阅读 0赞

#### 文章目录 ####

*  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 rsp.json()\}).then(data => \{console.log(data)\})
> 2.  用于respnse返回数据格式为文本格式  
>     fetch(url \[,options\]).then(rsp => \{return rsp.text()\}).then(data => \{console.log(data)\})
> 3.  用来请求文件返回二进制流  
>     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)
    })

## 参考链接 ##

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

[encodeURI_encodeURIComponent]: https://blog.csdn.net/m0_46309087/article/details/119839122