ToB企服应用市场:ToB评测及商务社交产业平台

标题: 快速理解 Axios [打印本页]

作者: 玛卡巴卡的卡巴卡玛 时间: 2024-8-5 20:32
标题: 快速理解 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>

复制代码

谢谢款待

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)