axios基础
axios的基本特性
axios是一个基于Promise用于浏览器和node.js的HTTP客户端
它具有以下特征:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
功能特点:
- 在浏览器中发送XMLHttpRequests请求
- 在node.js中发送http请求
- 支持Promise API
- 拦截请求和响应
- 转换请求和响应数据
支持多种请求方式:
axips(config)
axios.request(config)
axios.get(url[ config])
axios.delete(url[ config])
axios.head(url[ config])
axios.post(url[ data[ config]])
axios.put(ur[, data[ config]])
axios.patch(url[ data[, config])
axios的基本用法
axios.get('/adata')
.then(ret=>{
//data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data)
})
axios常用的API
1.get 查询数据
2.post 添加数据
3.put 修改数据
4.delete 删除数据
axios的参数传递
1.GET传递参数
// 通过URL传递参数
// 通过params选项传递参数(axios专门提供)
//传统url传参
axios.get('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
//Restful 形式传参
axios.get('/adata/123')
.then(ret=>{
console.log(ret.data)
})
//通过params选项传递参数
axios.get('/adata',{
params:{
id:123
}
})
.then(ret=>{
console.log(ret.data)
})
2.DELETE传递参数
// 参数传递方式与GET类似
axios.delete('/adata?id=123')
.then(ret=>{
console.log(ret.data)
})
axios.delete('/adata/123')
.then(ret=>{
console.log(ret.data)
})
axios.delete('/adata',{
params:{
id:123
}
})
.then(ret=>{
console.log(ret.data)
})
3.POST传递参数
//通过选项传递参数(默认传递的是json格式的教程)
axios.post('/adata',{
uname:'tom',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
// 通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params=new URLSearchParams();
params.append('paraml','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(ret=>{
console.log(ret.data)
})
4.PUT传递参数
//参数传递方式与POST类似
axios.put('/adata/123',{
uname:'tom',
pwd:123
}).then(ret=>{
console.log(ret.data)
})
axios的响应结果
响应结果的主要属性
data:实际响应回来的数据
headers:响应头信息
status:响应状态码
statusText:响应状态信息
axios.post('/axios-josn').then(ret=>{
console.log(ret)
})
axios的全局配置
axios.default.timeout=3000;//超时时间
axios.default.baseURL='http://localhost:3000/app'//默认地址
axios.default.headers['mytoken']='hello';//设置请求头 (需要后台进行配置)
栗子:
//配置请求的基本url地址
axios.defaults.baseURL = 'http://localhost:3000/'
axios.get('axios-json').then(function(ret) {
console.log(ret.data)
})
axios拦截器
1.请求拦截器
//在请求发出之前设置一些信息
// 添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
return config;
},function(err){
//处理响应的错误信息
})
栗子:
axios.interceptors.request.use(function(config){
console.log(config.url);
config.headers.mytoken('nihao');
return config; //必须将配置信息return出去
},function(err){
console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
console.log(data)
})
2.响应拦截器
//在获取数据之前对数据做一些加工处理
// 添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){
//处理响应的错误信息
})
栗子:
axios.interceptors.response.use(function(res){
//console.log(res); //不是实际的数据 是对象
var data = res.data; //这个是 实际的数据
return data; //必须将配置信息return出去
},function(err){
console.log(err)
})
axios.get('http://localhost:3000/adata').then(function(data){
console.log(data)
})