axios的入门以及vue中的模块封装

最新推荐文章于 2022-09-02 02:16:08 发布

原创

最新推荐文章于 2022-09-02 02:16:08 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了axios的基础使用，包括发送POST请求、请求方式、并发请求、全局配置和实例创建。重点讲述了如何在Vue项目中对axios进行模块封装，以优化项目中的HTTP请求管理。

一、axios

axios是基于promise对ajax的一种封装
ajax mvc 
axios mvvm

二、axiso的基本使用

//使用默认方式发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
   
   
        url:'http://localhost:9999/student/student/getAllStudent'
    }).then(res=>{
   
   
        console.log(res);
    })
</script>
默认使用 get方式进行请求

//指定请求方式为get的无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
   
   
        url:'http://localhost:9999/student/student/getAllStudent',
    	method:'get'
    }).then(res=>{
   
   
        console.log(res);
    })
</script>

//axios发送get方式的有参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   axios({
   
   
       url:'http://localhost:9999/student/student/findStudentById?id=1'
   }).then(res=>{
   
   
       console.log(res);
   });
</script>

//axios发送get方式请求其他形式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   axios({
   
   
       url:'http://localhost:9999/student/student/findStudentById',
       params:{
   
   
           id:'1'
       }
   }).then(res=>{
   
   
       console.log(res);
   });
</script>

axiso发送post请求

//使用post方式发送无参请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
   
   
        url:'http://localhost:9999/student/student/pGet',
        method:'post'
    }).then(res=>{
   
   
        console.log(res);
    })
</script>

//使用axios发送带有参数的post请求
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   axios({
   
   
       url:'http://localhost:9999/student/student/findStudentByName',
       method:'post',
       params:{
   
   
           name:'张三' //url上拼接上name参数 ？name=张三
       }
   }).then(res=>{
   
   
       console.log(res);
   });
</script>

//使用axios发送带有参数的post请求 使用data传递
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
   axios({
   
   
       url:'http://localhos