Axios 是目前应用最为广泛的 AJAX 封装库
Axios的特性有:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用axios时,需要通过使用script标签引入:https://unpkg.com/axios/dist/axios.min.js
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 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
})