一小池勺❤️❤️❤️ ❤️❤️❤️❤️胸有惊雷而面如平湖者，可拜上将军也。
Axios （引入：cnpm install axios -S）
Axios 是一个基于promise设计模式封装的AJAX库（JQ中的AJAX就是最普通的AJAX库，没有基于PROMISE管理模式），简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。中文文档：https://javasoho.com/axios/index.html#Node-js。
基础语法
- GET系列：
axios.get(url[, config])
axios.head(url[, config])
axios.delete(url[, config])
- POST系列：
axios.post(url[,data[,OPTIONS]]) 【data：通过请求主体传递给服务器的内容】
axios.put(url[,data[,OPTIONS]])
- 常使用的请求配置：
是一些创建请求时可以用的配置选项，只有
URL是必需的，若没有指定method，请求方式将默认使用get方法。
baseURL：基础的URL路径
transformRequest：处理请求参数(对POST系列有作用)
+发送POST请求时未处理请求参数
处理后
transformResponseL：把返回的结果进行处理
headers：自定义设置请求头信息
params（get用它）：等价于JQ中的DATA：会把PRAAMS中的内容基于URL问号传参的形式转为x-www-form-urlencoded格式（name=xxx&age=18）。
paramsSerializer：传递参数的序列化
data（在post请求中，一般不写进配置项，调用方法时直接传即可）：是作为请求主体被发送的数据，只适用于 PUT，POST，PATCH这些方法
timeout：请求超时时间
withCredentials：false 表示跨域请求时是否需要使用凭证，默认为 false
validatestatus：validatestatus: function (status) {return status >=200 && status < 300} 默认是AXIOS本身只有在HTTP状态码是以2开头的时候是成功，其余都认为是失败状态，当然我们也可以自己来设置 return 的结果。
responseType：预设服务器返回结果的格式，默认是 JSON（如果我们设置了RESPONSE-TYPE,AXIOS会根据设置的类型，把服务器返回的结果处理为对应的格式）,支持的类型：BUFFER，TEXT，STREAM
我们来发送几个最简单的axios请求
- GET 发送请求
执行axios.xxx()都会返回一个PROMISE实例，AJAX请求成功会把实例状态改为FULFULLED，AJAX请求失败会把实例状态改为REJECTED，并且将获取的结果或者错误原因作为PROMISE的VALUE值。
axios 并没有像JQ中有catch那样的配置项来清理缓存，我们可以通过给URL地址后设置请求头来处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Axios基础语法</title> </head> <body> <script src="node_modules/axios/dist/axios.min.js"></script> <script> //=> GET系列：axios.get(url[, config]) axios.head(url[, config]) axios.delete(url[, config]) //=> POST系列：axios.post(url[,data[,OPTIONS]]) axios.put(url[,data[,OPTIONS]]) axios.get('./json/data.json', { headers: { CHI: encodeURIComponent("悲惨世界") }, params: { id: 1, from: "Alian" } }).then(result => { console.log(result) }).catch(reason => { console.log(reason) }) </script> </body> </html>
控制台的打印结果
- CONFIG:我们自己配置的选项信息
- DATA:存储的是响应主体内容
- HEADERS:存储响应头的信息
- REQUEST:AJAX实例
- STATUS:响应状态码
- STATUS-TEXT:状态码的描述
其中 DATA（从data中获取响应主体内容） 和 HEADERS（） 中的内容是我们所常用到的
所以处理返回结果
axios.get('http://127.0.0.1:8080/json/data.json', { headers: { CHI: encodeURIComponent("悲惨世界") }, params: { id: 1, from: "Alian" } }).then(result => { return result.data }).catch(reason => { console.log(reason) }).then(data => { console.log(data) })
- POST 发送请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Axios基础语法</title> </head> <body> <script src="node_modules/axios/dist/axios.min.js"></script> <script> axios.post('http://127.0.0.1:8080/json/data.json', { id: 1, from: "Alian" }, { headers: { CHI: encodeURIComponent("悲惨世界") }, transformRequest: function (data) { if (!data) return data; let str = ``; for (let key in data) { if (!data.hasOwnPropery(key)) break; str += `${key}=${data[key]}&` } return str.substring(0, str.length - 1) } }).then(result => { return result.data }).catch(reason => { console.log(reason) throw new Error(reason) }).then(data => { console.log(data) }) </script> </body> </html>
谢谢款待
