接口调用-axios用法

接口调用-axios用法

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

它具有一下特征：

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

axios的基本用法

axios官网下载，解压后在dist文件夹中找到js引入到所需项目中。

• 基本语法

axios.get('地址')
     .then(参数=>{
         //data属性名称是固定的，用于获取后台响应数据
         console.log(参数.data);
     });

axios的常用API

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

1.GET传递参数

• 通过URL传递参数

axios.get('http://localhost:3000/axios?id=123')
     .then(ret=>{
         //获得的ret为objet
         console.log(ret.data);
     });

//后台
app.get('/axios', (req, res) => {
    res.send('axios get 传参'+req.query.id);
});

或

axios.get('http://localhost:3000/axios/123')
     .then(ret=>{
         //获得的ret为objet
         console.log(ret.data);
     });

//后台
app.get('/axios/:id', (req, res) => {
    res.send('axios get 传参'+req.params.id);
});

• 通过params传递参数

axios.get('http://localhost:3000/axios',{
    params:{
        id:789
    }
}).then(function(ret){
        console.log(ret);
});
//后台
app.get('/axios', (req, res) => {
    //注意是query
    res.send('axios get 传参'+req.query.id);
});

2.DELETE传递参数

• 传参方式与GET类似,将get改为delete

3.POST传递参数

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

axios.post('http://localhost:3000/axios',{
    uname:'tkrj',
    pwd:777
}).then(ret=>{
    console.log(ret.data);
});

//后台
app.post('/axios', (req, res) => {
    //注意是body
    res.send('axios post 传参' + req.body.uname);
})

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

const params = new URLSearchParams();
params.append('uname','tkrj');
params.append('pwd','777');
axios.post('http://localhost:3000/axios',paramsthen(ret=>{
        console.log(ret.data);
});

4.PUT传递参数

• 传参与POST类似，将post改为put

axios的响应结果

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

axios内部已经处理好json响应数据

//后台
app.get('http://localhost:3000/axios', (req, res) => {
    res.json({
        uname:tkrj,
        age:19
    });
});
//此时前端获取的data为一个对象，可直接data.uname获取信息

axios的全局配置

• axios.defaults.timeout = 3000;//超时时间
• axios.defaults.baseURL = ‘http:/localhost:3000/app’;//默认地址

//配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
//请求地址可简写为：
axios.get('axios').then(function(ret){
        console.log(ret);
});

• axios.defaults.headers[‘自定义名’] = ‘qwer’//设置请求头

axios拦截器

1.请求拦截器

在请求发出之前设置一些信息

axios.interceptors.request.use(function (config) {
    //可以获取信息：例如请求地址
    console.log(config.url);
    //在请求发出之前进行一些信息配置
    //例如配置请求头
    config.headers.mytoken = 'hello';
    return config;
}, function (err) {
    //处理错误信息
    console.log(err);
});

2.响应拦截器

在获取数据之前对数据做一些加工处理

axios.interceptors.response.use(function (res) {
    //在这里对返回数据进行处理，例如：
    var data = res.data;
    //返回处理后的数据，即前端获取到的数据
    return data;
    // return res; 即返回原（未处理）数据
}, function (err) {
    //处理错误信息
    console.log(err);
});