客户端和服务器进行通信需要遵守HTTP协议,一个HTTP由请求行、消息头、消息体三部分组成。
请求行也由三部分组成,请求方法、URI、HTTP版本
GET/files/data.txt HTTP/1.1
HTTP的方法有get、post、delete、options、put、patch等。get、post、delete是我工作中比较常见的,delete很好理解,就是删除数据用的,下面就来说说get和post的区别。
1、get一般是从服务器拿数据的,至于要不要用其他的数据去换,这取决于写接口的同学。如果要,数据是放在URL里面带过去的,任何人都能看到URL,所以get的安全性不高。而post方法,数据是随着请求体传到服务器的。
2、毕竟URL里面能带的数据有限,所以用get不能传太多的数据,而post就没有数据长度的限制。
3、一般情况下,通过链接点进去的是get请求,post一般用于提交表单。
在我学习的过程中,我遇见了一个坑,公司有一个仓库的get请求,数据传输的方式看似和post一样,是从请求体里面传的,我当时还纠结了很久,怎么会这样的。后来才知道,其实这是被封装后的结果,在内部做了把数据拼接到URL上的处理。所以对于一位新手来说,看东西很多只是看到表面而已,挖不到实质。
服务端需要识别客户端的身份,身份信息就在消息头里面
Host: eloquentJavascript.net
User-Agent: My Imaginary browser
上面的信息就代表我要访问eloquentJavascript.net 服务器上的data.txt 文件。
消息体就是真正请求或是响应的主体,它一定是跟消息头相差一行的。如下面这样:
Content-length: 80
Content-Type: text/plain
This is the content of the file/data.txt
以上请求的信息都可以在都可以在浏览器中查看,已Chrome为例,可以在开发者工具的Network中查看发出去的请求,每个请求中的Headers就可以查看请求的详细信息。
下面我们来说说请求是如何发送出去的呢?
最基本的做法是创建一个HTTP请求对象request,用request的open、send属性来发送请求,用status,statusText来响应请求。但我工作中不是用的这种方式,工作中的请求分好几层来实现。
1、page页面层 —— API层
2、API层 —— request层
3、request层 —— 最终的配置层,最终的请求是通过axios发出去的。
发出去的请求都是含有域名的,但page层请求的接口一般是不带域名的,域名的配置是在最终的配置层来完成的,还有其他的一些配置,如token等。
我工作当中还碰到过这么一个情况,一个接口的域名由于某种原因改了,这时就需要我自己配置新的域名,并且原来域名的逻辑不能改。我可以这么做,给新的域名配置一个前缀,然后做一个判断,什么情况下用该前缀,就完事了。
对于请求接口的数据,我经常犯的错误是:看接口文档不仔细。着重看请求体的参数是不是必传,参数的数据类型是什么。如果参数类型不对,则必须转换。我在工作当中碰到过的几种转换:
1、接口要求传的数据类型是string。
number —— string,number类型会自动转为string类型。
JSON对象 —— string,用JSON.stringify()即可。
2、接口要求传的数据类型是number。
string —— number,在string前面加上“+”,可以实现。还有一种方法是
Number()方法,它的作用是把object转变为number,比如它可以把布尔值
转变为0和1,把new Date()转变为时间戳……
3、接口要求传的数据类型是array。
object —— array,引入qs模块。
qs.stringify({a: ['b', 'c']}, {arrayFormat: 'brackets'})
// 'a[]=b&a[]=c'
qs模块还有还有好多种方法,目前为止我只用过这一种。它在GitHub中的链接可通过阅读原文查看。
传到服务器的参数可以在Network中headers的最下方查看,我之前就在这里掉过一个坑。我要更新某个会员的到期时间,发现该传的参数都已经传了,但是日期就是不会更新,害服务端的同学多花了1个多小时在那边排错,最终的原因却是——我传过去的user-id不是我在更新的那个人的user-id。
虽然大部分时候是需要发请求的,但是也有少数业务情况下,是不应该把请求发出去的,比如要更新某个日期,但日期压根就没改过。
服务器返回的数据至关重要,尤其是在排错方面,可以马上断定是前端的问题还是后端的问题。如果页面上显示的数据有问题,但是接口返回的数据没问题,那么问题就出在前端身上了。
我是新手,以上写的肯定有很多问题, 如果你发现了,麻烦给我留个言,多谢!
p.s. 在网页版的微信公众号上markdown格式还有的,但到手机端,markdown就消失了,不管了,先发出来。