Axios基本使用,为学习后续的Vue服务【发送请求+并发请求+前端拦截器】

目录

1、项目中引入Axios

2、使用Axios发送请求

2.1、例:发送GET请求

2.2、例:发送POST请求

3、axios并发请求

4、拦截器


1、项目中引入Axios

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

注:个人学习笔记,因自己学过后端,所以有关后端的代码,我在这里就不展示了~

不了解后端的宝子,也不会耽误学习,因为公司里会有写好的接口文档,直接使用就可以了

2、使用Axios发送请求

2.1、例:发送GET请求

javascript 复制代码
axios.get("http://localhost:8080/user?id=1").then(function(res) {
        console.log(res);
    }).catch(function(error){
        console.log(error);
    });
    // es6中简化写法:lambada表达式
    axios.get("http://localhost:8080/user?id=2").then((res)=> {
        console.log(res);
    }).catch((error)=> {
        console.log(error);
    });

格式其实还是挺简单的~

2.2、例:发送POST请求

javascript 复制代码
axios.post("http://localhost:8080/user",{
        name:"xxx",
        age:10
   }).then((res)=> {
        console.log(res);
    }).catch((error)=> {
        console.log(error);
    });

3、axios并发请求

并发请求:将多个请求在同一时刻发送到后端服务接口,最后在集中处理每个请求的响应结果

代码:

javascript 复制代码
function test1() {
        return axios.get("http://localhost:8080/user?id=3");
    }
    function test2() {
        return axios.get("http://localhost:8080/user?id=4");
    }
    axios.all([test1(),test2()]).then(
        axios.spread((res_test1,res_test2)=> {
            console.log(res_test1);
            console.log(res_test2);
        })
    );

4、拦截器

  • 作用:用来将axios中共有参数,响应公共处理交给拦截处理,减少axios发送请求时代码冗余
  • 类型:请求拦截器;响应拦截器

使用:

javascript 复制代码
 //创建axios的配置对象
    var instance = axios.create({
        baseURL:"http://localhost:8080/",
        timeout:5000
    });
    //请求拦截器
    instance.interceptors.request.use(function(config) {
        config.url += "?token=1111"
        return config;
    });
    //响应拦截器
    instance.interceptors.response.use(function(response) {
        if(response.status == 500) {
            alert("服务器内部故障");
        }
        return response
    });

好啦,以上就是简单的学习,简单了解一下,axios的强大之处~

后面周末会做一个简单小项目练练手,到时候再和大家分享分享~

相关推荐
liliangcsdn7 分钟前
从LLM角度学习和了解MoE架构
人工智能·学习·transformer
能不能别报错24 分钟前
K8s学习笔记(十四) DaemonSet
笔记·学习·kubernetes
报错小能手25 分钟前
linux学习笔记(19)进程间通讯——消息队列
linux·笔记·学习
进击的圆儿26 分钟前
【学习笔记05】C++11新特性学习总结(下)
c++·笔记·学习
芒果茶叶38 分钟前
并行SSR,SSR并行加载
前端·javascript·架构
vortex51 小时前
解决 Kali 中 Firefox 下载语言包和插件速度慢的问题:配置国内镜像加速
前端·firefox·腾讯云
修仙的人1 小时前
Rust + WebAssembly 实战!别再听说,学会使用!
前端·rust
maxine1 小时前
JS Entry和 HTML Entry
前端
用户63310776123661 小时前
Who is a Promise?
前端
用户785127814701 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js