Axios的基本使用

介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。在vue 中,用来发ajax请求,与后端交互。

  • 从浏览器中创建 XMLHttpRequests

  • 从 node.js 创建 http 请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 自动转换 JSON 数据

  • 客户端支持防御 XSRF

axios的get请求

// 为给定 ID 的 user 创建请求 axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
  
  $.ajax({
      url:'',
      type'get',
      success:function(data){
      },
      error:function(err){
    }
  })

aixos的post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone' })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


axios的默认配置

导入axios模块,然后直接用axios引用的方式,只适合该组件,其他组件要用,又要导入很麻烦。

未来以后axios是一个局部作用域的那么我们可以通过

Vue.prototype.$axios = axios;

此时我们就可以在任意组件中通过this.$axios获取到当前的axios实例


默认配置URL

axios.defaults.baseURL = 'http://127.0.0.1:8800'


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app"></div>

<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<!--发送ajax请求,需先引入模块-->
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>
<script type="text/javascript"> var App = {
        data() { return {
                msg: '' }
        },
        template: ` <div>
                    <button @click = 'sendAjax'>发Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>发post请求</button>
                </div>  `,
        methods: {
            sendAjax() { // 发送get请求 axios.get('http://127.0.0.1:8800/4')
                    .then(res => { // res 是返回的对象  console.log(res);
                        console.log(res.data); // 返回对象里面的数据 console.log(typeof res.data); this.msg = res.data;
                    })
                    .catch(err => { // 捕捉错误信息  console.log(err);
                    })

            },
            sendAjaxByPost() { var params = new URLSearchParams();
                params.append('name', 'alex');
                axios.post('http://127.0.0.1:8800/create', params)
                    .then(res => {
                        console.log(res);
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
        }
    }; new Vue({
        el: "#app",
        data() { return {}
        },
        components: {
            App
        },
        template: `<App></App>`  }) </script>

</body>
</html>
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>

<!-- vue和axios都是全局的对象  未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件 Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url axios.defaults.baseURL = 'http://127.0.0.1:8800'; var App = {
        data() { return {
                msg: '',
                datas: []
            }
        },
        template: ` <div>
                    <button @click = 'sendAjax'>发Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>发post请求</button>  {{datas}} </div>  `,
        methods: {
            sendAjax() { // 发送get请求 this.$axios.get('/')
                    .then(res => {
                        console.log(res.data);
                        console.log(typeof res.data); this.msg = res.data;

                    })
                    .catch(err => {
                        console.log(err);
                    })

            },
            sendAjaxByPost() { var params = new URLSearchParams();
                params.append('name', 'alex'); this.$axios.post('/create', params)
                    .then( res => {

                    console.log(this);
                    console.log(res); this.datas = res; // 将返回的结果,更改到 data  })
                    .catch(err => {
                    console.log(err);
                })
            }
        }
    }; new Vue({
        el: "#app",
        data() { return {}
        },
        components: {
            App
        },
        template: `<App />`  }) </script>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>

<!-- vue和axios都是全局的对象  未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件 Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url axios.defaults.baseURL = 'http://127.0.0.1:8800'; var App = {
        data() { return {
                msg: '',
                datas: []
            }
        },
        template: ` <div>
                    <button @click = 'sendAjax'>发Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>发post请求</button>  {{datas}} </div>  `,
        methods: {
            sendAjax() { // 发送get请求 this.$axios.get('/')
                    .then(res => {
                        console.log(res.data);
                        console.log(typeof res.data); this.msg = res.data;

                    })
                    .catch(err => {
                        console.log(err);
                    })

            },
            sendAjaxByPost() { var params = new URLSearchParams();
                params.append('name', 'alex'); this.$axios.post('/create', params)
                    .then( res => {

                    console.log(this);
                    console.log(res); this.datas = res; // 将返回的结果,更改到 data  })
                    .catch(err => {
                    console.log(err);
                })
            }
        }
    }; new Vue({
        el: "#app",
        data() { return {}
        },
        components: {
            App
        },
        template: `<App />`  }) </script>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/axios/dist/axios.js"></script>

<!-- vue和axios都是全局的对象  未来 axios会成为局部作用域-->
<script type="text/javascript"> // 挂载 Vue.prototype.$axios = axios; 使用插件 Vue.prototype.$axios = axios; // 后面直接使用 this.$axios 调用 // 配置公共的url axios.defaults.baseURL = 'http://127.0.0.1:8800'; var App = {
        data() { return {
                msg: '',
                datas: []
            }
        },
        template: ` <div>
                    <button @click = 'sendAjax'>发Get</button>
                    <div v-html = 'msg'></div>
                    <button @click = 'sendAjaxByPost'>发post请求</button>  {{datas}} </div>  `,
        methods: {
            sendAjax() { // 发送get请求 this.$axios.get('/')
                    .then(res => {
                        console.log(res.data);
                        console.log(typeof res.data); this.msg = res.data;

                    })
                    .catch(err => {
                        console.log(err);
                    })

            },
            sendAjaxByPost() { var params = new URLSearchParams();
                params.append('name', 'alex'); this.$axios.post('/create', params)
                    .then( res => {

                    console.log(this);
                    console.log(res); this.datas = res; // 将返回的结果,更改到 data  })
                    .catch(err => {
                    console.log(err);
                })
            }
        }
    }; new Vue({
        el: "#app",
        data() { return {}
        },
        components: {
            App
        },
        template: `<App />`  }) </script>

</body>
</html>
默认配置


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部