axios的接口调用
1. axios的基本特性axios(官网)是一个基于Promise用于浏览器和node.js的HTTP客户端。它具有以下特征:支持浏览器和node.js支持promise能拦截请求和响应自动转换JSON数据2. axios的基本用法//引入axios.jsaxios.get('/adata').then(ret => {//data属性名称是固定的,用于获取后台响应的数据console.l
1. axios的基本特性
axios(官网)是一个基于Promise用于浏览器和node.js的HTTP客户端。
它具有以下特征:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
2. axios的基本用法
//引入axios.js
axios.get('/adata')
.then(ret => {
//data属性名称是固定的,用于获取后台响应的数据
console.log(ret.data)
})
3. axios的常用API
- get:查询数据
- post:添加数据
- put:修改数据
- delete:删除数据
GET
通过传统url传递参数:
axios.get('/adata?id=123')
.then(ret => {
console.log(ret.data)
})
//req.query.id
通过Restful形式的url传递参数:
axios.get('/adata/123')
.then(ret => {
console.log(ret.data)
})
//req.params.id
通过params选项传递参数:
axios.get('/adata',{
params:{
id:123
}
})
.then(ret => {
console.log(ret.data)
})
//req.query.id
DELETE
参数传递方式与get类似。
通过url传递参数:
axios.delete('/adata?id=123')
.then(ret => {
console.log(ret.data)
})
//req.query.id
通过Restful形式的url传递参数:
axios.delete('/adata/123')
.then(ret => {
console.log(ret.data)
})
//:id
//req.params.id
通过params选项传递参数:
axios.delete('/adata',{
params:{
id:123
}
})
.then(ret => {
console.log(ret.data)
})
//req.query.id
POST
通过选项传递参数(默认传递的是json格式的数据)
axios.post('/adata',{
uname:'tom',
pwd:123
})
.then(ret => {
console.log(ret.data)
})
//req.body.uname + '---' + req.body.pwd
通过URLSearchParams传递参数(application/x-www-form-urlencoded)
const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(ret => {
console.log(ret.data)
//req.body.uname + '---' + req.body.pwd
})
PUT
参数传递方式与post类似,也是两种格式都支持,一般使用json格式。
axios.put('/adata/123',{
uname:'tom',
pwd:123
})
.then(ret => {
console.log(ret.data)
})
//:id
//req.body.uname + '---' + req.body.pwd + '---' + req.body.id
4. axios的响应结果
影响结果的主要属性
- data:实际响应回来的数据
- headers:响应头信息
- status:响应状态码
- statusText:响应状态信息
app.get('/axios-json',(req,res) => {
//res.send('axios get 传递参数' + req.query.id)
res.json({
uname:'lisi',
age:12
})
//前端ret.data.uname
})
5. axios的全局配置
axios.defaults.timeout = 3000; //超时时间
axios.defaults.baseURL = ‘http://localhost:3000/app’ //配置请求的基准URL地址,请求路径就可以简化操作
axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerwqer2ewrwe23eresdf23’ //配置请求头信息
6. axios拦截器
6.1 请求拦截器
在请求发出之前设置一些信息
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些信息设置
config.headers.mytoken = 'hello';
return config;
},function(err){
//处理相应的错误信息
console.log(err)
})
6.1 响应拦截器
在获取数据之前对数据做一些加工处理
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回数据做处理
var data = res.data;
return data;
//return res;
},function(err){
//处理相应的错误信息
console.log(err)
})
更多推荐
所有评论(0)