详解JS异步请求

异步请求

传统的 同步请求 往往会伴随 页面的 跳转 、而 异步请求的产生 实现了页面的 局部刷新 从而 让 网上冲浪 变得更加容易、更加简单、更加节省流量。

• 异步请求的核心对象 XMLHttpRequest

let  xhr = new XMLHttpRequest()     

• open(method, url, async) : 打开连接

//  method  代表 发送请求的方式，支持 GET,  POST 请求 
// url  请求地址 
// async 默认值是 true, 代表采用异步请求 
xhr.open(method ,  url , async) 

• setRequestHeader(name, value) ： 设置 发送请求的 请求头信息
• send(data) : 发送请求 并携带数据 到服务器
• onreadystatechange : 这是一个事件 、 该事件 负责 监听 服务器 和 客户端的 链接状态，
• readyState : 获取 客户端 和 服务器的 链接 状态
  • 0 : 没有打开 客户端和 服务器的通道
  • 1 ： 已经打开 连接 、调用 了 open
  • 2 ： 已发送请求 、调用 了 send
  • 3 : 服务器正在处理数据 、或数据 正在向 客户端发送
  • 4 : 服务器 已向 客户端 发送完成数据
• status : 获取 服务器 响应的 客户端 状态码
  • 200 ~ 2XX： 服务器 向客户端 正常返回数据 , 201 (添加数据成功) 、 204 （删除数据成功）
  • 301 : 永久性重定向 、 302 临时重定向 、 304 （数据未变化）
  • 400 ： 请求参数有问题 、 401 没有认证登录 、 403 禁止访问 、 404 页面找不到 、 405 请求方式不正确 、 406 媒体类型不正确 。
  • 500 ： 服务器代码异常 、 502 上游服务出现异常 。
• responseText : 获取服务器返回的数据。格式是 字符串 。

// 1. 创建一个 异步请求的 核心对象 
let xhr = new XMLHttpRequest(); 

//2. 调用 open 方法，打开 客户端和 服务器的通道 、调用天气预报接口 获取 今日实况天气
xhr.open("GET", "https://restapi.amap.com/v3/weather/weatherInfo?key=cd1d2751ad046252748d6038c797994f&city=410100&extensions=base")
//3. 调用 setRequestHeader 设置请求头信息
  xhr.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded")
// 4. 发送请求到服务器
xhr.send(null) ;

//2. 监听 客户端 和服务器的 状态 
xhr.onreadystatechange = function() {
	// 5. 6. 判断 客户端 和服务器的连接状态 以及 服务器响应的状态码
	if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
		// 在 网页中显示 今日 天气 和 风力 
		let ret = JSON.parse(xhr.responseText)
		//console.log(ret); 
		document.querySelector(".weather").innerHTML = ret.lives[0].weather ;
		document.querySelector(".dir").innerHTML = ret.lives[0].winddirection ;
		document.querySelector(".power").innerHTML = ret.lives[0].windpower ;
		document.querySelector(".t").innerHTML = ret.lives[0].temperature ;
	}
}

fetch 实现异步请求

fetch 是 ES6 提供的一种 异步请求的实现方式 、不需要引入额外的第三方库 即可实现 。

fetch 对服务器返回的状态码不敏感、 对于 fetch 而言 ，只要能够调用接口、且能够调用成功，即 返回一个 fullfilled状态的 promise 。

所以 在 fetch 的时候，往往需要进行 简单的封装 才能够正常的使用 。

fetch(url, {
    method:  ""  , // 设置请求方式，默认是GET。 支持 GET , POST , PUT (更新所有),  DELETE , PATCH (部分更新)  , OPTION 等请求方式。
    body:    ,    //  设置请求参数  支持 JSON格式的字符串 、支持 FormData 对象。    
    headers:  ,    //  设置请求头信息 、是一个对象 。
}).then(response => {
    //  response.text()  将返回的结果 以 字符串形式表示 

    return response.json() ;   // 将 返回的结果 以 json的形式表示 
    
}).then(ret => {
    // ret 代表 接口返回的 数据
})

表单提交方式

let searchParam = new URLSearchParams(); 
searchParam.append("key", "value")
searchParam.append("name", "xxxxx")

fetch(url,  {
    method: "POST",
    body:  searchParam ,
    headers: {
        "Content-Type":  "application/x-www-form-urlencoded"
    }
})

文件上传提交方式

let formData = new FormData(); 
formData.append("key", "value")
formData.append("name", "xxxxx")

fetch(url,  {
    method: "POST",
    body:  formData ,
    headers: {
        "Content-Type":  "multipart/form-data"
    }
})

json 提交方式

fetch(url,  {
    method: "POST",
    body:  JSON.stringfiy({name:"张三", age: 20}) ,
    headers: {
        "Content-Type":  "application/json"
    }
})

axios 异步请求

是一个非常强大的 异步请求库、 支持 promise 、支持请求和响应的拦截处理 等等。

axios 调用 get 请求 接口

axios.get("https://tsapi.amap.com/v1/track/service/list", {
	params: {
		key: apiKey
	}
}).then(ret=> {
	console.log(ret.data);
})

axios 调用 post/ put /patch 请求 提交表单数据

let params = {key: apiKey, name: "xxxx", desc: "yyyyy"}
axios.post("https://tsapi.amap.com/v1/track/service/add", params, {
	headers: {
		"Content-Type": "application/x-www-form-urlencoded"
	}
}).then(ret => {
	console.log(ret.data);
})

axios 调用 post/ put /patch 请求 提交文件上传数据

let params = new FormData() ;
params.append("key", "xxxxxx");
params.append("file", ...) ;
axios.post("https://tsapi.amap.com/v1/track/service/add", params).then(ret => {
	console.log(ret.data);
})

axios 调用 post/ put /patch 请求 提交 JSON 数据

let params = {key: apiKey, name: "xxxx", desc: "yyyyy"}
axios.post("https://tsapi.amap.com/v1/track/service/add", params).then(ret => {
	console.log(ret.data);
})