使用fetch、patch、put发送请求

目录

1.fetch

2.patch

3.put

---

1.fetch

fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。

基本用法

• （1）fetch()使用 Promise，不使用回调函数，因此大大简化了写法，写起来更简洁。
• （2）fetch()采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更合理一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状都在同一态个接口管理，容易写出非常混乱的代码。
• （3）fetch()通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

基本的GET请求（get请求，第二个参数可选）

export function fetch(url, params = {}) {
  return new Promise((resolve, reject) => {
    let _url = getURL(url);
    axios.get(_url, {
      params: params
    })
      .then(response => {
        resolve(response);
      })
      .catch(err => {
        reject(err)
      })
  })
}

基本的post请求，

export function postFetch(url,data = {}){
  return new Promise((resolve,reject)=>{
    let _url = getURL(url);
    axios.post(_url,data)
    .then(response =>{
      resolve(response)
    })
    .then(res=>{
      console.log(res.statusText);
    })
    .catch(err=>{
      reject(err)
    })
  })
}
//post第二个参数：{
        method: 'POST', // POST请求
        body: `userName=xxx&passWord=123`,		// POST的参数 
        headers: {			// 设置的请求头
          'Content-Type': 'application/x-www-form-urlencoded' // 这里是表单内容
        }

//此下为不封装的post实例
fetch('http://127.0.0.1:3000/res-post', {
    method: 'POST', // POST请求
    body: `userName=xxx&passWord=123`,		// POST的参数 
    headers: {			// 设置的请求头
        'Content-Type': 'application/x-www-form-urlencoded' // 这里是表单内容
    }
})
    .then(res => {
        res.json()
            .then(res => {
                console.log(res);
            })
            .catch(err => {
                console.log('不是json格式或者服务器错误:', err);
            })
    })

2.patch

patch方法用来更新局部资源

 特点：非安全、幂等。
说明：向服务器端提交数据，请求数据在报文body里；
与PUT类似，发送一个修改数据的请求，区别在于PATCH代表部分更新；
后来提出的接口方法，使用时可能去要验证客户端和服务端是否支持；
作用：用于创建、更新资源。局部更新，比如：user对象，只更改了name属性，那么他的其他属性值是不会变的，如果用post，那么其他属性值会被设置为null（全局更新）

patch封装实例

export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    let _url = getURL(url);
    axios.patch(_url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

3.put

特点：非安全、幂等。
说明：向服务器端提交数据，请求数据在报文body里；
发送一个修改数据的请求，需求数据更新（全部更新）。
作用：用于创建、更新资源。

put请求实例 

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    let _url = getURL(url);
    axios.put(_url, data)
      .then(response => {
        resolve(response.data);
      }, err => {
        reject(err)
      })
  })
}

幂等 

幂等性：用户对于同一操作发起的一次请求或者多次请求的结果是一致的，不会因为多次点击而产生了副作用。