axios基本介绍

释放双眼,带上耳机,听听看~!
axios也是一种ajax请求。

ajax请求

官网地址

vue全家桶

  • vue-cli脚手架
  • axios
  • router
  • vuex
  • element

为什么用axios?

  • 原生的ajax过于麻烦,调用不方便。

  • jquery相比ajax过于宠大,我们有时候公公只需要一个网络接口请求功能。

  • axios只做接口请求,体积较小,网络加载会快些,而且功能还挺丰富如(请求拦截,数据 返回拦截等)

 

axios之get请求

用法:

//get请求
axios.get('请求接口路径', 
          //params就是要传的参数,也可直接串到路径上
          {params: {
              ID: 12345
           }}
           )
    .then(response=>{console.log("成功的处理");})  
    .catch(error=>{console.log("错误的处理");});

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button @click="clickEvent">点我获取数据</button>
        <ul>
            <li v-for="(item, index) in axiosRes" :key="index">{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <!-- 要使用axios,首先要要导包进来 -->
    <script src="./axios.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                axiosRes: ""
            },
            methods: {
                clickEvent() {

                    // axios.get(url).then(//正常返回).catch(//错误返回)  参数直接写url上
                    //axios.get(url,{params:{//参数}}).then(//正常返回).catch(//错误返回)

                    //箭头函数用法
                    // axios.get('https://autumnfish.cn/api/joke/list?num=10')
                    //     .then(res => {
                    //         this.axiosRes = res.data.jokes
                    //     })
                    //     .catch((error) => {
                    //         console.log(error)
                    //     });

                    // 传统用法
                    let _this = this
                    axios.get('https://autumnfish.cn/api/joke/list?num=10')
                        .then(function (res) {
                            _this.axiosRes = res.data.jokes
                        })
                        .catch((error) => {
                            console.log(error)
                        });

                }
            }
        })

    </script>


</body>

</html>

axios之post请求

用法:

//post请求
axios.post('请求接口路径',          
           {     //接口请求参数
            firstName: 'Fred',
            lastName: 'Flintstone'
             })
    .then(response=>{console.log("成功的处理");})  
    .catch(error=>{console.log("错误的处理");});

Demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="username">
        <button @click="poseEvent">调用post</button>
        <div>
            {{msg}}
        </div>


    </div>
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                username: "",
                msg: ""
            },
            methods: {
                poseEvent() {
                    // axios.post(url,{//需要传递的参数}).then((res)=>{//成功返回}).catch(err=>{//错误返回})
                    axios.post("https://autumnfish.cn/api/user/reg", {
                        username: this.username
                    }).then(res => {
                        this.msg = res
                        console.log(res)
                    }).catch(err => {
                        console.log(err)
                    })
                }
            }
        })
    </script>
</body>

</html>
内容投诉

人已赞赏
JavaScriptVue

vue生命周期之beforeCreate、created

2020-9-1 19:46:15

JavaScriptVue

VUE的生命周期之beforeMount、mounted、beforeUpdate、updated

2020-9-3 19:42:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索