阅读 94

JavaScript异步(AJAX/axios/Promise/async/await)

在浏览器不重新加载任何窗口或窗体内容操控HTTP的需要使用JavaScript异步技术。

HTTP规定了WEB浏览器如何从WEB服务器获取文档和像WEB服务器提交表单内容,以及WEB服务器如何响应这些请求和提交。 WEB浏览器会处理大量的HTTP。通常,HTTP并不在JavaScript脚本的控制下,只有当用户单击链接、提交表单和输入URL时才发生。 但是,用JavaScript代码操纵HTTP是可行的。 用脚本设置window对象的location属性或者调用表单对象的submit()方法,都会初始化HTTP请求。在这两种情况下,浏览器会重新加载页面。————《JavaScript权威指南》

一、HTTP的一些知识

(一)请求报文

1、请求报文组成部分

  •  起始行
  •  首部
  •  主体  

 2、请求报文起始行简单介绍

(1)method(方法):用来告诉服务端做什么事。

  •  GET: 从服务器获取一份文档
  •  HEAD:只从服务器获取文档的首部 
  • POST:向服务器发送需要处理的数据 
  • PUT:将请求的主体部分存储在服务器上 
  • TRACE:对可能经过代理服务器传送到服务器上去的报文进行追踪 
  • OPTIONS:决定从服务器上执行哪些方法 
  • DELETE:从服务器删除一份文档 

(2) request-URL(请求URL) 所请求资源在服务器的路径。

通用格式为<scheme>://<user>:<password>@<host>:<port>/<path>;<params>?<qeury>#<frag> ,HTTP协议请求资源时,为http,默认80 。

(二)响应报文 

1、响应报文组成部分

  • 起始行  
  • 首部  
  • 主体  

 2、响应报文起始行简单介绍

(1)status(状态码):用来告诉客户端发生了什么事 

  • 100-199(已定义100-101):信息提示 
  • 200-299(已定义200-206):成功 
  • 300-399(已定义300-305):重定向 
  • 400-499(已定义400-415):客户端错误 
  • 500-599(一定义500-505):服务器错误 

(2)reason-phrase(原因短语) 为状态码提供文本形式的解释,和状态码成对出现。

(三)报文流

一、AJAX

AJAX:使用脚本操纵HTTP和WEB服务器进行交换数据,而不会导致页面重新加载的通信协议。

参考:developer.mozilla.org/zh-CN/docs/…

使用AJAX做两件事:

  • 在不重新加载页面的情况下发送请求给服务器。
  • 接受并使用从服务器发来的数据。

(一)使用AJAX与服务器通信过程

步骤一:首先要有一个完成这些事的对象

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
复制代码

步骤二:遵循先订阅后发布的原则,定义响应状态改变后回调哪个函数处理响应

httpRequest.onreadystatechange = function(){
    // Process the server response here.
};
复制代码

步骤三:初始化并发送请求

//初始化请求
httpRequest.open('GET', 'http://www.example.org/some.file', true);  //true表示异步
//发送请求
httpRequest.send();
复制代码

1、XMLHttpRequest.open(method, url, async)函数

我们知道请求报文的起始行包含method和request-URL参数,调用open()函数时需要指定这些内容,对应第一个参数和第二个参数,第三个参数表示是同步还是异步请求,一般设置为异步,默认也是异步。

2、XMLHttpRequest.send(body)函数

body是一个可选的参数,其作为请求主体;如果请求方法是 GET 或者 HEAD,则应将请求主体设置为 null,没有赋值也默认是null。如果请求方法是POST,则需要指定请求主体。

(二)步骤二处理响应的函数怎么写

1、如何知道通信过程到哪一步:XMLHttpRequest.readyState

也可以表述为:0 (请求还未初始化) ,1 (已建立服务器链接),2 (请求已接受),3 (正在处理请求) ,4 (请求已完成并且响应已准备好)。

XMLHttpRequest.readyState取值为XMLHttpRequest.DONE或者4就是通信完成服务器响应接收到的时候

2、如何得知通信结果——响应的状态码:XMLHttpRequest.status

取值是整数,是标准的HTTP的状态码,2xx范围的表示成功。在请求完成前,status值为0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0。

3、通信成功如何获得响应报文主体:XMLHttpRequest.responseText和XMLHttpRequest.responseXML。

  • XMLHttpRequest.responseText – 服务器以文本字符的形式返回。
  • XMLHttpRequest.responseXML – 以 XMLDocument 对象方式返回,之后就可以使用JavaScript来处理。

综上,处理响应的函数第一步应该判断通信是否结束能获得响应,然后判断服务端处理结果(状态码)是怎样,如果是处理成功的就去读取想要的报文,框架如下

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
    if (httpRequest.status === 200) {
        // Perfect!
    } else {
        // There was a problem with the request.
        // For example, the response may have a 404 (Not Found)
        // or 500 (Internal Server Error) response code.
    }} else {
    // Not ready yet.
}
复制代码

在通信错误的事件中(例如服务器宕机),在访问响应状态 onreadystatechange 方法中会抛出一个例外。为了缓和这种情况,则可以使用 try...catch 把上面的 if...else 语句包裹起来。

(三)发送post请求时的请求报文的首部和主体

实体首部提供有关实体及其内容的大量信息,可以告诉报文接收者(服务器)它在对什么进行处理。实体首部中有一部分是内容首部,其中的Content-Type首部,表示请求主体的对象类型,即客户端告诉服务器实际发送的数据类型。HTTP POST 方法 发送数据给服务器时,其请求主体的类型由 Content-Type 首部指定。

1、请求首部:XMLHTTPRequest(XHR)设置Content-Type的方法

XMLHttpRequest.setRequestHeader(header,value) :设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。设置Content-Type则header设置为"Content-Type"。

2、请求主体:XMLHTTPRequest的请求主体作为send()方法的参数

3、XHR发送不同主体时首部的设置

  • 请求主题是简单的文本:Content-Type设置为'text/plain;charset=utf-8',可以不设置,请求主体传入会自动设置。
  • 请求主题是表单数据(a=1&b=2&c=3的形式的表单数据):Content-Type应设置为'application/x-www-form-urlencoded',可以不设置,请求主体传入会自动设置。
  • 请求主题是复杂的表单数据(包含上传文件表单数据,FormData数据):Content-Type设置为'multipart/form-data',FromData请求主体传入会自动设置developer.mozilla.org/zh-CN/docs/…
  • 请求主题是JSON数据(JSON.stringfy()序列化Jason对象):Content-Type设置为'application/json'。

4、Content-Type的语法

Content-Type:<media-type>;<charset>;<boundary>

  • media-type:资源或数据的媒体类型(MIME type)
  • charset:字符编码标准 ,us-ascii:ASCII字符编码;ios-8859-x:x可取值为1,2,5,6,7,8,15,是一套欧洲字符编码。常用的是ios-8859-1,是对ASCII的8位扩展,以支持西欧的多种语言;utf-8:UTF-8字符编码。(默认编码)
  • boundary:多部份实体中是必须的,用来封装消息的多个部分的边界。

二、axios

文档:www.npmjs.com/package/axi…

可以使用json-server搭建一个服务器来学习,只需三步,

文档:www.npmjs.com/package/jso…

axios发送请求后返回的是promise对象,发送请求的方法列举如下:

(一)aixos发送请求

1、Axios API发送请求

  • axios(config)

    //config中通过method属性指定不同请求方法 axios({ method:"get", url: "http://localhost:3000/posts/1" }).then((response)=>{ console.log(response.data) })

  • axios(url[,config])

    axios('/user/12345'); 默认方法就是get,不用指定config了

2、请求方法别名API发送请求

  • axios.request(config)——发送各类请求

  • axios.get(url[, config])——GET请求

  • axios.delete(url[, config])——DELETE请求

  • axios.head(url[, config])——HEAD请求

  • axios.options(url[, config])——OPTION请求

  • axios.post(url[, data[, config]])——POST请求

  • axios.put(url[, data[, config]])——PUT请求

  • axios.patch(url[, data[, config]])

    //request发送请求,config中通过method属性指定不同请求方法 axios.request({ method:"get", url: "http://localhost:3000/comments/1" }).then((response)=>{ console.log(response) }) //get发送请求 axios.get("http://localhost:3000/comments/1").then((response)=>{ console.log(response) }) //post发送请求axios.post("http://localhost:3000/comments",{ "body": "你好啊", "postId": 1 }).then((response)=>{ console.log(response) })

3、创建axios实例,实例发送请求

  • axios.create([config])

  axios实例创建出来后,这个实例发请求的用法和(一)中axios的使用是一样的。

创建实例可以复用一些基本的config配置,还可以创建不同的实例连接到不同的服务器。

 const instance=axios.create({
	baseURL:"http://localhost:3000",
	timeout:3000
});
instance({
	method:"GET",
	url: "/posts/1"
}).then((response)=>{
	console.log(response.data)
})
复制代码

4、关于参数传递

可以根据业务需要,比如路由配置,后台接口要求,选取不同的传参方式。

(1)query方式传参(这个记忆的时候可以联想数据库查询时拼接查询参数)

axios.get('/user?ID=12345')
复制代码

(2)params方式传参

方式一:

axios.get('/user/12345');
复制代码

方式二:

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
复制代码

(二)aixos特色功能

1、对请求和响应进行拦截

可以在then/catch方法处理响应数据前对请求或者响应进行拦截。比如,根据后台接口返回的响应,做一个判断是否已经登录的处理,登录与否走不同的逻辑,就可以对响应进行拦截。

响应拦截:我们知道"2xx”都是服务端处理成功的状态码,其他则是出错的状态码,拦截器可以对这些情况都做一些拦截处理。

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });
复制代码

一个响应拦截的例子:

这个改造过程中经常会用到以下两个函数:Promise.resolve()Promise.reject() ,是手动创建一个已经 resolve 或者 reject 的 Promise 快捷方法。

axios.interceptors.response.use(function (response) {    
	let res= response.data;    
	if(res.status==0){
		//假设后台正常返回状态码是0        
		return res.data; //假设res.data是请求成功时后台返回的数据    
	}else if(res.status==10){
		//假设后台接口返回的用户未登录的错误码是10
		window.location.href="/#/login";         
		return Promise.reject(res);    
	}else{        
		console.log(res.msg)        
		return Promise.reject(res);    
	}  
}, function (error) {    
	console.log(error);   //处理2xx以外的错误码    
	return Promise.reject(error);  
});
复制代码

2、取消请求:有需要时参看官方文档

三、Promise

B站有一个讲解promise很不错的视频:

www.bilibili.com/video/BV1GA…

MDN参考文档

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

(一)Promise是什么?为什么要用它?

Promise 是一个对象,它代表了一个异步操作的最终完成或者失败。 是异步编程的一种解决方案。一个Promise对象有两个很重要的属性:[[PromiseState]]状态和[[PromiseResult]]值。

使用Promise,可以更优雅的写出异步任务成功和失败的处理过程。特别是对于一个异步任务执行完成后再继续下一个异步任务的场景,使用promise会让代码可读性更高。看下面的代码,是一个“回调地狱”:

doFirstSomething(function(firstResult) {
  //第一个异步任务执行成功,执行第二个异步任务
  doSecondThing(firstResult, function(secondResult) {    
//第二个异步任务执行成功,执行第三个异步任务
    doThirdThing(secondResult, function(finalResult) {      
        console.log('Got the final result: ' + finalResult);
    }, failureCallback);
  }, failureCallback);
}, failureCallback);
复制代码

让doFirstSomething返回一个promise对象,使用promise就可以很优雅的写成这样,这就是promise的链式调用。

doSomethingFirst().then(firstResult=>{
   return doSecondThing(firstResult)
}).then(secondResult=>{
   return doThirdThing(secondeThing)
}).catch(failureCallback);
复制代码

(二)Promise对象的状态

Promise对象怎么去代表异步任务的成功和失败?写代码,在创建Promise时就让他根据异步任务调用结果指定成功/失败的条件。

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。 
  • 已兑现(fulfilled): 意味着操作成功完成。 ——异步任务成功
  • 已拒绝(rejected): 意味着操作失败。——异步任务失败

1、改变Promise状态的方法

let p=new Promise((resolve,reject)=>{            
	//1、resolve,pending=>fullfiled(resolved)            
	//resolve("执行成功")         
	//2、reject,reject("执行失败") 
	//pending=>reject            
	//3、抛出错误 ,pending=>reject           
	throw '出问题了'           
})
复制代码

2、一个创建Promise的例子,例子中根据异步任务的结果n的取值处理为成功或失败。

 let p=new Promise((resolve,reject)=>{
   setTimeout(()=>{                
	let n=rand(1,100);              
	console.log(n);                
	if(n<=30){                    
		resolve(n);  //将promise对象的状态置为成功,函数的参数值回传递给then中的成功回调方法                
	}else{                    
		reject(n); //将promise对象的状态置为失败,函数的参数值回传递给then中的失败回调方法                
	}            
   },3000)               
});
复制代码

(三)成功回调&失败回调&成功或失败都进行的回调

1、Promise.prototype.then():返回一个Promise**。**这个函数可以有两个参数,第一个参数指定异步任务成功时的回调,第二个参数执行异步任务失败时的回调。语法:

p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
})
复制代码

2、Promise.prototype.catch():返回一个Promise。这个函数指定异步任务失败时的回调,相当于then()方法只指定失败回调,不指定成功回调的场景。语法

p.catch(onRejected);

p.catch(function(reason) {
   // 拒绝
});
复制代码

为什么有了then()方法,还有有一个catch()方法呢,强大之处就是“链式调用”的时候,可以链式穿透,一个地方捕获进行n个promise的失败回调,比使用then一个个定义失败回调少写了不少代码。

let p=new Promise((resolve,reject)=>{
	//reject("NO");            
	resolve("YES")        
})        
p.then(value=>{            
	throw("出错了")        
}).then(value=>{            
	console.log(222);         
}).then(value=>{            
	console.log(333);          
}).catch(error=>{
//catch能捕获以上任一个promise抛出的异常            
	console.log(error);         
})
复制代码

3、Promise.prototype.finally(),返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。语法:

p.finally(onFinally);

p.finally(function() {
   // 返回状态为(resolved 或 rejected)
});
复制代码

综上,假设doSomething()返回一个Promise对象,一个比较完善的Promise使用框架如下:

doSomething().then(function(response) {
    //success,process response
  }) .catch(function(error) { 
    //fail,process error}).finally(function() {
    //do something whether success or fail 
});
复制代码

(四)怎么理解链式调用

链式调用:一个异步任务执行完成后在继续下一个异步任务

第n(n>=2)个异步任务的执行与否有什么决定?由其前一个then()返回的Promise的状态决定,如果时成功的就执行下一个then()的成功回调,如果是失败就执行下一个then()的失败回调或者是catch()的回调,如果是未确定则跳出链式调用。

回调函数有以下几种执行结果:

let p=new Promise((resolve,reject)=>{            
	resolve("OK");        
})        
let result=p.then(value=>{            
	//1、抛出错误:状态是rejected            
	//throw "出了问题"            
	//2、返回的是非promise的任意值:状态时resolved ,值是"hello world"。            
	//return "hello world"            
	//3、返回的是promise,状态由这个promise的状态决定            
	return new Promise((resolve,reject)=>{                
		//resolve("oh yes");                
		reject("oh no");            
	})        
},error=>{            
		alert(error)        
})
复制代码

then方法返回的promise的状态由then指定的回调函数执返回结果决定。

 (1)如果抛出异常,新的promise变为rejected,reason为抛出的异常 ;

 (2)如果返回的是非promise的任意值,新promise变为resolved,value为返回的值 ;

 (3)如果返回的是另一个新的promise,此promise的结果就会变为新promise的结果。

(五)中断Promise

即终端链式调用,当且仅当then()方法中返回一个pending状态的promise对象时,才能终端链式调用。

let p=new Promise((resolve,reject)=>{            
	resolve("YES")        
})        
p.then(value=>{            
	console.log(111);             
	return new Promise(()=>{})   //中断Promise        
}).then(value=>{            
	console.log(222);   //不会输出        
}).then(value=>{            
	console.log(333);    //不会输出        
}).catch(error=>{            
	console.log(error);        
})
复制代码

(六)将一些旧式回调API改造成Promise

1、setTimeout函数封装

const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); 
//从右往左赋值,wait是一个函数
wait(10000)
.then(() => {
    saySomething("10 seconds")
}).catch(
    failureCallback
);
复制代码

2、Ajax封装

 function sendAJAX(url){        
	const p=new Promise((resolve,reject)=>{        
		let xmlhttp=new XMLHttpRequest();        
		xmlhttp.open("GET",url);        
		xmlhttp.send();        
		xmlhttp.onreadystatechange=function(){            
			if(xmlhttp.readyState==4&&xmlhttp.status==200){                
				resolve(xmlhttp.responseText);  //将promise对象的状态置为成功,函数的参数值回传递给then中的成功回调方法            
			}
			else{                
				reject(xmlhttp.status+","+xmlhttp.readyState);  //将promise对象的状态置为失败,函数的参数值回传递给then中的失败回调方法            
			}        
		}        
	});          
	return p;          
}

sendAJAX("https://api.apiopen.top/getJoke").then((value)=>{        
	console.log(value);    
},(err)=>{        
	console.log(err)    
})
复制代码

四、async&await

async和await是基于Promise的语法糖,让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用Promise。

(一)async——返回的是Promise

async关键字声明的函数,返回值的是一个Promise对象。Promise的状态由这个函数的返回值决定:

1、返回值是非Promise对象,则为fullfiled,结果值就是返回的值

2、返回值是Promise对象,由这个promise的执行结果决定

 async function test(){        
	// return "abc";    //等价于return Promise.resolve("abc")        
	return new Promise((resolve,reject)=>{            
		//resolve("OK")  //成功            
		//reject("ERR")  //失败            
		throw("hhhh")    //失败               
	})
}
复制代码

(二)await——返回等待的Promise的[[PromiseResult]]值

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成。语法:

[返回值] = await 表达式;
复制代码

await 右侧的表达式一般为Promise对象,但也可以是其他类型的值

1、如果表达式是Promise对象,若 Promise 正常处理(fulfilled),其回调的resolve函数参数作为 await 表达式的值,继续执行 async function。若 Promise 处理异常(rejected/throw error),await 表达式会把 Promise 的异常原因抛出,需要通过try...catch捕获处理

2、如果表达式是其他值,直接将此值作为await的返回值 。

async function test(){        
	let p= new Promise((resolve,reject)=>{            
		//resolve("yeah ok")            
		reject("oh no")        
	});        
	//1、await右侧是promise表达式        
	//let res=await p;        
	//2、await右侧是其它类型的数据        
	//let  res="abc"        
	try{            
		let res=await p;        
	}catch(e){            
		console.log(e);  /* 3、捕获promise异常 */        
	}           
}
复制代码

(三)async和await怎么简洁Promise链式调用

MDN参考文档:developer.mozilla.org/zh-CN/docs/…

"await 表达式会暂停当前 async function 的执行,等待 Promise 处理完成",基于此,链式代码中,除最后一个then之外,链中其他等待Promise执行完成的操作都放在await函数中,一个Promise对应一个await。这就实现了链式调用的效果。

1、Promise链式调用形式

fetch('coffee.jpg')
.then(response => response.blob())
.then(myBlob => {
  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
})
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});
复制代码

2、async和await形式

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();

  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);
}

myFetch()
.catch(e => {
  console.log('There has been a problem with your fetch operation: ' + e.message);
});
复制代码

由于await本身也是返回一个Promise对象,所以上面的代码还可以结合Promise做进一步的优化。

async function myFetch() {
  let response = await fetch('coffee.jpg');
  let myBlob = await response.blob();
  return myBlob;
}
myFetch().then(myBlob=>{  let objectURL = URL.createObjectURL(myBlob);
  let image = document.createElement('img');
  image.src = objectURL;
  document.body.appendChild(image);}).catch(e => {  console.log('There has been a problem with your fetch operation: ' + e.message);
});
复制代码

五、等待多个异步任务完成再继续

1、Promise.all():这个方法的参数是promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型),一般来说传一个数组,数组里面的元素是Promise对象。返回值是一个Promise对象;

(1)参数中n个Promise对象状态都是fulfilled或者这个参数是空的(比如,[]),那么返回的那个Promise对象的状态就是fulfilled,值是数组。

(2)参数中存在一个Promise对象状态都是rejected,那么返回的那个Promise对象就是rejected;

(3)其他情况就是pending状态。

MDN参考文档:developer.mozilla.org/zh-CN/docs/…

下面是来自MDN很典型的例子:

const promise1 = Promise.resolve(3);
const promise2 = 42;  //非Promise类型就是fullfilled的Promise对象
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]
复制代码
文章分类
前端
文章标签