Ajax常用封装库——Axios的使用
短信预约 -IT技能 免费直播动态提醒
Axios 是目前应用最为广泛的 AJAX 封装库
Axios的特性有：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用axios时，需要通过使用script标签引入：https://unpkg.com/axios/dist/axios.min.js
axios的中文网链接：Axios中文网
Axios API
向axios（）传递相关配置来创建请求；
- axios（对象格式的配置选项）
- axios（url，config）
常用的配置项
- url：用于请求的服务器URL
- method：创建请求时使用的方法
- baseURL：传递相对URL前缀，将自动加在url前面
- headers：即将被发送的自定义请求头
- params：即将与请求一起发送的URL参数
- data：作为请求主体被发送的数据
- timeout：指定请求超时的毫秒数（0表示无超时时间）
- responseType：表示服务器响应的数据类型，默认“json”
axios（）.then(function(response){
//正常请求的响应信息对象response
})
.catch(function(error){
//捕获的错误
})代码展示如下：
<script class="lazy" data-src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//使用axios方法 post请求
axios({
url:"/pinglun",
method:"post",
baseURL:"http://localhost:3000",
header:{
"Content-Type":"application/json"
},
data:{
"content":"well",
"lyId":4
},
timeout:1000,
}).then(function(res){
console.log(res.data);
}).catch(function(error){
console.log(error);
})
</script>axios 全局默认值的配置
axios.defaults.baseURL = 'https://xxx.xxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'axios拦截器：在请求或响应被then或catch处理前拦截它们
axios 的请求拦截器
//axios 的请求拦截器
axios.interceptors.request.use(function(config){
//配置项config
config.params = {
id:2 //对配置项中的params进行更改，筛选id=2
}
return config;//要有返回值
})
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function(res){
console.log(res.data);
})
.catch(function(error){
console.log(error);
})
//axios 方法
axios("http://localhost:3000/pinglun")
.then(function (res) {
console.log(res.data);
})
.catch(function (error) {
console.log(error);
})
//多个axios方法也可以拦截axios 的响应拦截器
//axios 的响应拦截器
axios.interceptors.response.use(function(response){
return(response.data);//response里有很多值，选择data即可
})
//axios 方法
axios("http://localhost:3000/liuyan")
.then(function (res) {
console.log(res);//response那里拦截了，已经将数据传成data了
})
.catch(function (error) {
console.log(error);
})axios的快速请求方法
axios.get(url[,config])
//axios.get(url[,config])
axios.get("http://localhost:3000/liuyan?id=2")
.then(function(res){
console.log(res.data);
})
axios.get("http://localhost:3000/liuyan",{
params:{
id:1
}
}).then(function(res){
console.log(res.data);
})axios.post(url[,data[,config]])
//axios.post(url[,data[,config]]) , post请求，添加数据
axios.post("http://localhost:3000/users",{
name:"laowang",
age:23,
class:1
})axios.delete(url[,config])
//axios.delete(url[,config])
axios.delete("http://localhost:3000/liuyan",{
params:{
id:5
}
})axios.put(url[,data[,config]])
//axios.put(url[,data[,config]])
axios.put("http://localhost:3000/liuyan",{
name:"wangshisan",
id:11
})XMLHttpRequest2.0，html5对XMLHttpRequest类型全面升级，使其变得更加易用、强大。
onload / onprogress
XML.onload 事件：只在请求完成时触发
XML.onprogress 事件：只在请求进行中触发
//xhr.onload事件：只在请求完成时触发
//xhr.onprogress事件：只在请求进行中触发
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
console.log("load:",this.readyState);
};
xhr.onprogress = function(e){
console.log("progress:",this.readyState);
//在周期性请求过程中，接收到的数据个数
console.log(e.loaded);
//接收数据的总个数
console.log(e.total);
}
xhr.send(null);response属性
以对象的形式表述响应体，其类型取决于responseType的值。根据responseType的值，来通过特定的类型请求数据。
responseType要在调用open（）初始化请求之后，在调用send（）发送请求到服务器之前设置才会有效。
//XMLHttpRequest之前的response返回
//responseText
// responseXml
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/pinglun");
xhr.onload = function(){
var data = JSON.parse(this.responseText);
console.log(data);
}
xhr.send(null);
// xhr2.0新增的response属性
// response
// responseType
var xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:3000/liuyan");
xhr.responseType = "json";
xhr.onload = function(){
console.log(this.response);
}
xhr.send(null)以上就是Ajax常用封装库——Axios的使用的详细内容，更多关于Ajax封装库Axios的使用的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
