axios用法

前言

axios 一般和vue进行配合使用，当然也可以和react等其他框架配合使用。如果是单页模式的话，一般会对 axios 进行封装从而较少调用的代码。

官网文档

官网： https://github.com/axios/

中文站点： http://www.axios-js.com/

示例

引入：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

（1）get请求：

let guolv_url="/audit/guolv_data";
axios.get(guolv_url,{
    params: {
        username: "tom",
        dbname: "db_xx"
    }
}).then((res) => {
    console.log(res);
})

或者：

let guolv_url="/audit/guolv_data"; 
axios({
    method:'get',  // 请求类型
    url: 'http://127.0.0.1/jq/art/api.php',
    params: {
        username: "tom",
        dbname: "db_xx"
    },
    })
    .then(function (res) {     // .then 请求成功返回的数据
        console.log('it is:',res.data.name)
        vm.msg = res.data.name;
        // console.log(vm);
        console.log(vm.$el);
    })
    .catch(function (error) {   // .catch 失败执行
        console.log(error);
    });

(2) post请求

axios({
    method:'post',  // 请求类型
    url: 'http://127.0.0.1/jq/art/api.php',
    params: {
        username: "tom",
        dbname: "db_xx"
    },
    })
    .then(function (res) {     // .then 请求成功返回的数据
        console.log('it is:',res.data.name)
        vm.msg = res.data.name;
        // console.log(vm);
        console.log(vm.$el);
    })
    .catch(function (error) {   // .catch 失败执行
        console.log(error);
    });

(3) 执行多个并发请求

//获得用户信息的请求
function getUserAccount() {
     return axios.get('/user/12345');
}
 
//获取用户许可证的请求
function getUserPermissions() {
     return axios.get('/user/12345/permissions');
}
 
axios.all( [ getUserAccount(),  getUserPermissions() ] )
    .then(axios.spread(function (acct, perms) {
        //两个请求现已完成
    })
);