使用promise解决回调地狱_Promise背景

网络请求

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);})

‘