vue axios 接口调用&参数传递

axios的基本特征

axios是一个基于Peomise用于浏览器和node.js的HTTP客户端

它具有以下特征：

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据

axios的基本用法

axios.get('/adata')
　　.then(ret => {
　　//data属性是固定的，用于获取后台的响应数据
　　sonsole.log(ret.data);
})

axios的常用API

• get：查询数据
• post：添加数据
• put：修改数据
• delete：删除数据

axios的参数传递

GET传递参数

• 通过URL传递参数

//传统URL传递参数
axios.get('/adata?id')
　　.then(ret => {
　　console.log(ret.data);
})
//Restful形式传递参数
axios.get('/adata/123')
　　.then(ret => {
　　console.log(ret.data);
})

后台获取书

//传统URL传递参数、
app.get('/adata',(req,res) => {
　　res.send('axios get 传递参数' + req.query.id);
})

//Restful形式传递参数、
app.get('/adata',(req,res) => {
　　res.send('axios get 传递参数' + req.params.id);
})

• 通过params选项传递参数

axios.get('/adata',{
　　　　params:{
　　　　　　id:123
　　　　}
　　})
　　.then(ret => {
　　　　console.log(ret.data);
　　})

DELETE传递参数

• 参数传递与GET相似

POST传递参数

• 通过选项传递参数（默认传递的 json 格式的数据）

axios.post('/adata',{
　　　　uname:'tom',
　　　　pwd: 123
　　}).then(ret => {
　　　　console.log(ret.data);
　　})

• 通过URLSearchParams传递参数（application/x-www-form-ur;encoded）

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/api/test',params).then(ret=>{
    console.log(ret.data);
})

PUT传递参数

• 参数传参与POST相似

axios的响应结果

响应结果的主要属性

• data：实际响应回来的数据
• headers：响应头信息
• status：响应状态码
• statusText：响应状态信息

通过调用后台，在页面中运行，通过控制台查看返回的对象

axios.post('/axios-json').then(ret => {
    console.log(ret);
})

axios的全局配置

• axios.defaults.timeout = 3000; //超时时间
• axios.defaults.baseURL = 'http://localhost:3000/'; //默认地址axios.defaults.headers['mytoken'] = 'hello'; //设置请求头