快速理解 Axios
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>