网络请求
HTTP通信过程 - 请求和响应
1.HTTP通信过程 - 请求
HTTP协议规定:1个完整的由客户端发给服务器的HTTP包含以下内容
(1)请求行:包含了请求方法、请求资源路径、HTTP协议版本
(2)请求头:包含了对客户端的环境描述、客户端请求的主机地址等信息
(3)请求体:客户端发给服务端的具体数据,比如文件数据
get请求和post请求的详细区别
get | post | |
回退 | 浏览器回退时无害 | 再次提交请求 |
产生的URL地址 | 可以被bookmark(书签) | 不可以被bookmark |
浏览器cache | 被浏览器主动cache(隐藏) | 不会被主动cache 除非手动设置 |
编码 | 只能进行url编码 | 支持多种编码方式 |
传送参数有无长度限制 | 有 | 无 |
参数的数据类型 | 只接受ASCII字符 | 没有限制 |
安全性 | 不安全,因为参数直接暴露在URL上 | 安全 |
get参数 | 通过URL传递 | 放在Request body中 |
请求参数 | 会被完整保留在浏览器历史记录里 | 不会被保留在浏览器历史记录里 |
2.HTTP通信过程 - 响应
客户端向服务器发送请求,服务器应当做出响应,即返回数据给客户端,HTTP协议规定:1个完整的HTTP响应中包含以下内容:
(1)状态行:包含了HTTP协议版本、状态码、状态英文名称
(2)响应头:包含了对服务器的描述、对返回数据的描述(包括数据类型Content-Type、数据长度Content-Length、响应时间等)
(3)实体内容:服务器返回给客户端的具体数据,比如文件数据
原生Ajax的用法(基础使用)
var xhr = new XMLHttpRequest();xhr.open('post','www.xxx.com',true)//接收返回值xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(xhr.status >= 200 && xhr.status < 300 || xhr.status ==304){ console.log(xhr.responseText); } }}// 处理请求参数postData = {"name1":"value","name2":"value2"};postData = (function(value){ var dataString = ""; for( var key in value ){ dataString += key + "=" + value[key] + "&"; }; return dataString;}(postData));//设置请求头xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");//异常处理xhr.onerror = function(){ console.log('Network request failed')}//跨域携带cookiexhr.withCredentials = true;//发出请求xhr.send(postData);
同步异步是什么?
同步和异步关注的是消息通信机制
同步方法调用一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为
异步方法调用更像是一个消息传递,一旦开始,方法调用就会立即返回,调用者就可以继续后续的操作。而异步方法通常会在另外一个线程中,“真实”地执行着。整个过程,不会阻碍调用者的工作
同步执行:
异步执行:
Promise是什么?
主要用于异步计算
可以将异步操作队列化,返回符合预期的结果
可以在对象之间传递和操作promise,帮助我们处理队列
异步回调问题
之前处理异步是通过纯粹的回调函数的形式进行处理
很容易进入到回调地狱中,剥夺了函数return的能力
问题可以解决,但是难以读懂,维护困难
稍有不慎就会踏入回调地狱-嵌套层次深,不好维护
一般情况下我们一次性调用API就可以完成请求。
有些情况需要多次调用服务器API,就会形成一个链式调用,比如为了完成一个功能,我们需要调用API1、API2、API3,依次按照顺序进行调用,这个时候就会出现回调地狱的问题
Promise
promise是一个对象,对象和函数的区别就是对象可以保存状态,函数不可以(闭包除外)
并未剥夺函数return的能力,因此无需层层传递callback,进行回调获取数据
代码风格,容易理解,便于维护
多个异步等待合并便于解决
new Promise( function(resolve,reject){ //一段耗时的异步操作 resolve('成功')//数据处理完成 //reject('失败')//数据处理出错 } ).then( (res) => {console.log(res)},//成功 (err) => {console.log(err)}//失败 ))
resolve作用是,将Promise对象的状态从“未完成”变成"成功"(即从pending变为resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从pending变为rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
promise有三个状态:
1.pending[待定]初始状态
2.fulfilled[实现]操作成功
3.rejected[被否决]操作失败
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
promise状态一经改变,不会再变
promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected
这两种情况只要发生,状态就凝固了,不会再变了
new Promise(resolve => { setTimeout(() => { resolve('hello') },2000)}).then(res => { console.log(res);})
‘