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

龙洋静2024-01-12 10:41

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的强大之处~

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