由patch请求方法引发的一些总结

patch的诞生

假设我们有一个UserInfo，里面有userId， userName， userGender等10个字段。可你的编辑功能因为需求，在某个特别的页面里只能修改userName，这时候的更新怎么做？
人们通常(为徒省事)把一个包含了修改后userName的完整userInfo对象传给后端，做完整更新。但仔细想想，这种做法感觉有点二，而且真心浪费带宽(纯技术上讲，你不关心带宽那是你土豪)。
于是patch诞生，只传一个userName到指定资源去，表示该请求是一个局部更新，后端仅更新接收到的字段。

而put虽然也是更新资源，但要求前端提供的一定是一个完整的资源对象，理论上说，如果你用了put，但却没有提供完整的UserInfo，那么缺了的那些字段应该被清空。如下示例：

this.$api.patch(this.baseUrl+"customer/customerinfo?token="+this.$cookie.token,
              {
                'customerId':this.$route.query.id,
                'name':this.userNanme,
                'sex':this.six,
                'birthday': this.datatime,
                'mobile': this.phone,
                'mobileremark':this.bzphone,
                'height':this.shengao,
                'weight':this.tizhong,
                'idtype':this.codeId,
                'idno':this.code.replace(/\s/g,''),
                'postaladdress':this.detailAddress,
                'province':this.addressProvince,
                'city':this.addressCity,
                'area':this.addressXian,
                "remark":this.remark,
                "isImportant":this.isImportant,
              },function(json){
                if(json.data.code==200){
                  Indicator.close();
                  vm.saveDisabled=true;
                  Toast({
                    message: json.data.message,
                    position: 'middle',
                    duration: 1000
                  });
                  history.back()
                }else if(json.data.code==402){
                  Indicator.close();
                  MessageBox('该客户已存在，请勿重复添加', '');
                  vm.saveDisabled=true;
                }else{
                  Indicator.close();
                  vm.saveDisabled=true;
                  Toast({
                    message: json.data.message,
                    position: 'middle',
                    duration: 1000
                  });
                }
              },function(){
                Indicator.close();
                vm.saveDisabled=true;
                Toast({
                  message:"服务器异常",
                  position: 'middle',
                  duration: 1000
                });
              }
            )

其中之所以采用this.$api.patch()的调用方式，是因为对axios的请求进一步做了封装。封装代码如下：

// 配置API接口地址
var root= this.baseUrl;

// 引用axios
var axios = require('axios');
// 自定义判断元素类型JS
function toType (obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}
/*
  接口处理函数
  不同的接口的成功标识和失败提示是不一致的，视情况调整。
*/

function apiAxios (method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' || method==='PATCH'? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    baseURL:root,  //调用url处理函数
    withCredentials: false,
    cache:false
  })
    .then(function (res) {
        if (success) {
          success(res);
        }
      // else if (res.data.resultflag =='1'){
      //   console.log(res.data.descript);
      //   if(failure){
      //     failure(res)
      //   }
      // }
      // else {
      //   if (failure) {
      //     failure(res)
      //   } else {
      //     window.alert('error: ' + JSON.stringify(res.data))
      //   }
      // }
    })
    .catch(function (err) {
      failure();
    })
}

// 返回在vue模板中的调用接口
export default {
  get: function (url, params, success, failure) {
    return apiAxios('GET', url, params, success, failure)
  },
  post: function (url, params, success, failure) {
    return apiAxios('POST', url, params, success, failure)
  },
  put: function (url, params, success, failure) {
    return apiAxios('PUT', url, params, success, failure)
  },
  delete: function (url, params, success, failure) {
    return apiAxios('DELETE', url, params, success, failure)
  },
  patch:function(url, params, success, failure) {
    return apiAxios('PATCH', url, params, success, failure)
  }
}

**总结来说：
HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。
而patch其实就是对新增五种请求方式中的put的补充。用来对已知资源进行局部更新。
补充一下，PATCH 与 PUT 属性上的一个重要区别还在于：PUT 是幂等的，而 PATCH 不是幂等的。
幂等是一个数学和计算机学概念，在计算机范畴内表示一个操作执行任意次对系统的影响跟一次是相同。**

首先，回溯一下历史。
HTTP（hypertext transport protocol），即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。

HTTP就是一个通信规则，通信规则规定了客户端发送给服务器的内容格式，也规定了服务器发送给客户端的内容格式。其实我们要学习的就是这个两个格式！客户端发送给服务器的格式叫“请求协议”；服务器发送给客户端的格式叫“响应协议”。

特点：

HTTP叫超文本传输协议，基于请求/响应模式的！
HTTP是无状态协议。
URL：统一资源定位符，就是一个网址：协议名://域名:端口/路径，例如：http://www.oldboy.cn:80/index.html

二 请求协议
请求协议的格式如下：

请求首行； // 请求方式 请求路径 协议和版本，例如：GET /index.html HTTP/1.1
请求头信息；// 请求头名称:请求头内容，即为key:value格式，例如：Host:localhost
空行； // 用来与请求体分隔开
请求体。 // GET没有请求体，只有POST有请求体。
浏览器发送给服务器的内容就这个格式的，如果不是这个格式服务器将无法解读！在HTTP协议中，请求有很多请求方法，其中最为常用的就是GET和POST。不同的请求方法之间的区别，后面会一点一点的介绍。

2.1　GET请求
*HTTP默认的请求方法就是GET
* 没有请求体
* 数据必须在1K之内！
* GET请求数据会暴露在浏览器的地址栏中
GET请求常用的操作：
1. 在浏览器的地址栏中直接给出URL，那么就一定是GET请求
2. 点击页面上的超链接也一定是GET请求
3. 提交表单时，表单默认使用GET请求，但可以设置为POST*

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36
Name
login/
1 requests ❘ 737 B transferred ❘ Finish: 5 ms ❘ DOMContentLoaded: 14 ms ❘ Load: 14 ms

GET 127.0.0.1:8090/login HTTP/1.1：GET请求，请求服务器路径为 127.0.0.1:8090/login ，协议为1.1；
Host:localhost：请求的主机名为localhost；
*User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0：与浏览器和OS相关的信息。有些网站会显示用户的系统版本和浏览器版本信息，这都是通过获取User-Agent头信息而来的；
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8：告诉服务器，当前客户端可以接收的文档类型，其实这里包含了/，就表示什么都可以接收；
Accept-Language: zh-cn,zh;q=0.5：当前客户端支持的语言，可以在浏览器的工具选项中找到语言相关信息；
Accept-Encoding: gzip, deflate：支持的压缩格式。数据在网络上传递时，可能服务器会把数据压缩后再发送；
Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7：客户端支持的编码；
Connection: keep-alive：客户端支持的链接方式，保持一段时间链接，默认为3000ms；
Cookie: JSESSIONID=369766FDF6220F7803433C0B2DE36D98：因为不是第一次访问这个地址，所以会在请求中把上一次服务器响应中发送过来的Cookie在请求中一并发送去过；这个Cookie的名字为JSESSIONID。
2.2　POST请求
(1). 数据不会出现在地址栏中
(2). 数据的大小没有上限
(3). 有请求体
(4). 请求体中如果存在中文，会使用URL编码！
username=%E5%BC%A0%E4%B8%89&password=123
为什么要进行URL编码
使用表单可以发POST请求，但表单默认是GET

<form action="" method="post">
  关键字：<input type="text" name="keyword"/>
  <input type="submit" value="提交"/>
</form>

输入yuan后点击提交，查看请求内容如下：

Request Headers
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:13
Content-Type:application/x-www-form-urlencoded
Cookie:csrftoken=z5H43ZwARx7AIJ82OEizBOWbsAQA2LPk
Host:127.0.0.1:8090
Origin:http://127.0.0.1:8090
Pragma:no-cache
Referer:http://127.0.0.1:8090/login/
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) 
           AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.89 Safari/537.36

Form Data
username:yuan

POST请求是可以有体的，而GET请求不能有请求体。

Referer: http://localhost:8080/hello/index.jsp：请求来自哪个页面，例如你在百度上点击链接到了这里，那么Referer:http://www.baidu.com；如果你是在浏览器的地址栏中直接输入的地址，那么就没有Referer这个请求头了；
Content-Type: application/x-www-form-urlencoded：表单的数据类型，说明会使用url格式编码数据；url编码的数据都是以“%”为前缀，后面跟随两位的16进制。
Content-Length:13：请求体的长度，这里表示13个字节。
keyword=hello：请求体内容！hello是在表单中输入的数据，keyword是表单字段的名字。
Referer的应用
三　响应协议
3.1　响应内容
响应协议的格式如下：
响应首行；
响应头信息；
空行；
响应体。
响应内容是由服务器发送给浏览器的内容，浏览器会根据响应内容来显示。遇到会开一个新的线程加载，所以有时图片多的话，内容会先显示出来，然后图片才一张张加载出来。

Request URL:http://127.0.0.1:8090/login/
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:8090
Response Headers
view source
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Oct 2016 06:48:50 GMT
Server:WSGIServer/0.2 CPython/3.5.2
X-Frame-Options:SAMEORIGIN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="/login/" method="post">
  用户名：<input type="text" name="username"/>
  <input type="submit" value="提交"/>
</form>    
</body>
</html>

HTTP/1.1 200 OK：响应协议为HTTP1.1，状态码为200，表示请求成功，OK是对状态码的解释；
Server:WSGIServer/0.2 CPython/3.5.2：服务器的版本信息；
Content-Type: text/html;charset=UTF-8：响应体使用的编码为UTF-8；
Content-Length: 724：响应体为724字节；
Set-Cookie: JSESSIONID=C97E2B4C55553EAB46079A4F263435A4; Path=/hello：响应给客户端的Cookie；
Date: Wed, 25 Sep 2012 04:15:03 GMT：响应的时间，这可能会有8小时的时区差；
3.2　状态码
响应头对浏览器来说很重要，它说明了响应的真正含义。例如200表示响应成功了，302表示重定向，这说明浏览器需要再发一个新的请求。

200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；
404：请求的资源没有找到，说明客户端错误的请求了不存在的资源；
500：请求资源找到了，但服务器内部出现了错误；
302：重定向，当响应码为302时，表示服务器要求浏览器重新再发一个请求，服务器会发送一个响应头Location，它指定了新请求的URL地址；
304：
当用户第一次请求index.html时，服务器会添加一个名为Last-Modified响应头，这个头说明了
index.html的最后修改时间，浏览器会把index.html内容，以及最后响应时间缓存下来。当用户第
二次请求index.html时，在请求中包含一个名为If-Modified-Since请求头，它的值就是第一次请
求时服务器通过Last-Modified响应头发送给浏览器的值，即index.html最后的修改时间，
If-Modified-Since请求头就是在告诉服务器，我这里浏览器缓存的index.html最后修改时间是这个,
您看看现在的index.html最后修改时间是不是这个，如果还是，那么您就不用再响应这个index.html
内容了，我会把缓存的内容直接显示出来。而服务器端会获取If-Modified-Since值，与index.html
的当前最后修改时间比对，如果相同，服务器会发响应码304，表示index.html与浏览器上次缓存的相
同，无需再次发送，浏览器可以显示自己的缓存页面，如果比对不同，那么说明index.html已经做了修
改，服务器会响应200。
3.3　其他响应头
告诉浏览器不要缓存的响应头：

Expires: -1；
Cache-Control: no-cache；
Pragma: no-cache；
自动刷新响应头，浏览器会在3秒之后请求http://www.baidu.com：

Refresh: 3;url=http://www.baidu.com
3.4　HTML中指定响应头
在HTMl页面中可以使用来指定响应头，例如在index.html页面中给出http://www.baidu.com“>，表示浏览器只会显示index.html页面3秒，然后自动跳转到http://www.baidu.com.