Axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单的讲就是可以发送get、post请求。

特点

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

安装

1、使用 npm：
$ npm install axios
2、使用 bower：
$ bower install axios
3、使用 cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用：

get
1、get请求

    axios({
        method: 'get',
        url: 'http://www.warmtel.com:8089/api/list',
    }
    ).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

2、get请求 get属性直接省略method、url

    axios.get('http://www.warmtel.com:8089/api/list').then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

3、get请求 使用params自动匹配参数

    axios({
        method: 'get',
        url: 'http://www.warmtel.com:8089/api/find',
        params: { //parmas会自动拼接 写为json对象
            id: 1
        }
    }
    ).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    }).catch(err => {
        console.log(err.data);
    });

4、get请求 get属性

    axios.get('http://www.warmtel.com:8089/api/find', { params: { id: '1' } }).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

post
1、post请求 data属性json对象参数

    axios({
        method: 'post',
        url: 'http://www.warmtel.com:8089/api/login',
        data: {
            username: 'admin',
            password: '123'
        }
    }
    ).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

2、post请求 post属性可以省略data url

    axios.post('http://www.warmtel.com:8089/api/login',
        {
            username: 'admin',
            password: '123'
        }
    ).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

配置

    // 配置默认axios
    const axiosSev = axios.create({
        baseURL: 'http://www.warmtel.com:8089/api',  //配置默认地址
        timeout: 2000  //配置延迟时间
    });
   axiosSev({
        method: 'post',
        url: '/login',
        data: {
            username: 'admin',
            password: '123'
        }
    }
    ).then(res => {
        console.log(res.data);
        contentEl.innerHTML = JSON.stringify(res.data);
    });

拦截器

// 配置默认axios
    const axiosSev = axios.create({
        baseURL: 'http://www.warmtel.com:8089/api', 
        timeout: 2000  //配置延迟时间
    });
    // 请求拦截
    axiosSev.interceptors.request.use((config) => {
        return config;
    }, (err) => {
        return Promise.reject(err);
    });
    // 响应拦截
    axiosSev.interceptors.response.use((response) => {
        return response

    }, (err) => {
        return Promise.reject(err);
    });