vue简学之路（案例二）axios请求get及post以及全局拦截器

最新推荐文章于 2024-09-02 11:20:32 发布

健身小白

最新推荐文章于 2024-09-02 11:20:32 发布

阅读量317

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_44014971/article/details/103839111

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

axios请求
在这里要先安装axios,我的例子是直接引入网上的

命令如下 npm install axios 可使用的idea直接安装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios请求</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!--使用axios請求獲得文件內容-->
<div  id="app">
    <h1>
        {{msg}}
    </h1>
    <button @click="getmsg()">click</button>
    <button @click="postmsg()">postclick</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:""
        },
        //生命周期函数,组件在被挂载的时候调用
        mounted(){
            //全局拦截器,可以对请求修改
            axios.interceptors.request.use(function(config){
                console.log("请求马上就要发出了，在拦截请求之前发送")
                return config
            })
            axios.interceptors.response.use(function (response) {
                console.log(response)
                response.data="修改为董国庆"
                console.log("拦截到响应")
                return response
            })
        },

        methods:{
            //請求
            getmsg:function()
            {
                // 需要npm安装axios
                axios.get("./test.txt",{params:{id:1},headers:{token:"123"}}).then(res=>{
                    this.msg=res.data
                    console.log("ok")
                }).catch(res=>{
                    console.log(err)
                 })
            },
            postmsg:function()
            {

                axios.post("./test.txt",{name:"admin",age:18}).then(res=>{
                    console.log("ok")
                }).catch(res=>{
                    console.log(err)
                })
            }

        }
    })
</script>

</body>
</html>