Ajax常用封装库——Axios的使用（axios怎么封装ajax的）干货满满

目录Axios的特性有：
Axios API
向axios（）传递相关配置来创建请求；常用的配置项axios 全局默认值的配置axios拦截器：在请求或响应被then或catch处理前拦截它们
axios的快速请求方法
onload / onprogress
response属性

axios（）.then(function(response){
 //正常请求的响应信息对象response
})
.catch(function(error){
 //捕获的错误
})

<script 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.defaults.baseURL=’https://xxx.xxx.com’;
axios.defaults.headers.post[‘Content-Type’]=’application/x-www-form-urlencode’

//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.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.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]]) , post请求，添加数据
axios.post(“http://localhost:3000/users”,{
name:”laowang”,
age:23,
class:1
})

//axios.delete(url[,config])
axios.delete(“http://localhost:3000/liuyan”,{
params:{
id:5
}
})

//axios.put(url[,data[,config]])
axios.put(“http://localhost:3000/liuyan”,{
name:”wangshisan”,
id:11
})

//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);

//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)

您可能感兴趣的文章:Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)Vue官方推荐AJAX组件axios.js使用方法详解与APIvue项目使用axios发送请求让ajax请求头部携带cookie的方法vue 组件的封装之基于axios的ajax请求方法vue结合axios与后端进行ajax交互的方法关于vue中的ajax请求和axios包问题vue axios 在页面切换时中断请求方法 ajaxaxios进阶实践之利用最优雅的方式写ajax请求关于前端ajax请求的优雅方案（http客户端为axios）在Vue组件化中利用axios处理ajax请求的使用方法vue使用Axios做ajax请求详解VUE 更好的 ajax 上传处理 axios.js实现代码