axios的接口调用

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