黑客灵魂

这个屌丝很懒，什么也没留下！

热门标签

Vue实战之axios基本使用_axios在vue中的使用

作者：黑客灵魂 | 2024-07-23 01:11:54

踩

axios在vue中的使用

文章目录

Vue 实战
- 十、Axios 基本使用

Vue 实战

十、Axios 基本使用

1、引言

Axios：是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面进行渲染。

页面局部更新技术类似jQuery、Ajax技术。

Axios 用来在页面发起异步请求到后端服务，并将后端服务响应数据渲染到页面上。

jQuery 推荐 ajax技术 vue里面并不推荐在使用jQuery框架 vue推荐使用axios 异步请求库。

axiox总结：用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新页面局部

官方定义：axios异步请求库，并不是vue官方库，第三方异步请求库在vue中推荐使用axios。

易用、简洁且高效的http库===>发送http异步请求

官方网站：http://www.axios-js.com/

特性

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

2、Axios 第一个程序

中文网站：https://www.kancloud.cn/yunye/axios/234845
安装： https://unpkg.com/axios/dist/axios.min.js

（1）搭建后端服务

在这里插入图片描述

（1）创建maven工程 vue_day02_back，在pom.xml文件中引入依赖坐标

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.baizhi</groupId>
    <artifactId>vue_day02_back</artifactId>
    <version>1.0-SNAPSHOT</version>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
    </parent>

    <dependencies>
        <!--web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>
</project>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

（2）在项目的resources目录下新建application.properties

server.port=8081
1

（3）创建包结构，入口类函数、controller视图层、实体类

入口类函数

package com.baizhi;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class VueDay2BackApplication {
    public static void main(String[] args) {
        SpringApplication.run(VueDay2BackApplication.class, args);
    }
}
1
2
3
4
5
6
7
8
9
10
11

controller

package com.baizhi.controller;

import com.baizhi.entity.User;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin //用来解决跨域
public class DemoController {

    private static final Logger log = LoggerFactory.getLogger(DemoController.class);

    @GetMapping("/demo")
    public String demo(@RequestParam("id") String id, @RequestParam("name") String name) {
        log.info("demo ok...");
        log.info("id:{} name:{}", id, name);
        // int n = 1 / 0;
        return "demo ok...";
    }

    @PostMapping("/test")
    public String test(@RequestBody User user) {
        log.info("test ok...");
        log.info("id:{} name:{}", user.getId(), user.getName());
        return "test ok ";
    }

    @PutMapping("/test1")
    public String test1(@RequestBody User user) {
        log.info("test1 ok...");
        log.info("id:{} name:{}", user.getId(), user.getName());
        return "test1 ok ";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

实体类

package com.baizhi.entity;

public class User {
    private String id;
    private String name;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（2）GET方式请求

后端代码

@RestController
@CrossOrigin //用来解决跨域
public class DemoController {

    private static final Logger log = LoggerFactory.getLogger(DemoController.class);

    @GetMapping("/demo")
    public String demo(@RequestParam("id") String id, @RequestParam("name") String name) {
        log.info("demo ok...");
        log.info("id:{} name:{}", id, name);
        // int n = 1 / 0;
        return "demo ok...";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //发送axios的get方式请求
    axios.get("http://localhost:8081/demo?id=21&name=xiaozhu").then(function (response) {
        console.log(response);
        console.log(response.data);//响应结果
    }).catch(function (error) {
        console.log(error);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

测试

在这里插入图片描述

（3）POST方式请求

后端代码

@RestController
@CrossOrigin //用来解决跨域
public class DemoController {

    private static final Logger log = LoggerFactory.getLogger(DemoController.class);

    @PostMapping("/test")
    public String test(@RequestBody User user) {
        log.info("test ok...");
        log.info("id:{} name:{}", user.getId(), user.getName());
        return "test ok ";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //发送一个post方式请求
    axios.post("http://localhost:8081/test", {id: 21, name: "xiaozhu"}).then(function (response) {
        console.log(response);
        console.log(response.data);//响应结果
    }).catch(function (error) {
        console.log(error);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

测试

在这里插入图片描述

（4）put 方式请求

后端代码

@RestController
@CrossOrigin //用来解决跨域
public class DemoController {

    private static final Logger log = LoggerFactory.getLogger(DemoController.class);

    @PutMapping("/test1")
    public String test1(@RequestBody User user) {
        log.info("test1 ok...");
        log.info("id:{} name:{}", user.getId(), user.getName());
        return "test1 ok ";
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //发送put方式请求
    axios.put("http://localhost:8081/test1", {id: 22, name: "xiaoli"}).then(function (response) {
        console.log(response);
        console.log(response.data);//响应结果
    }).catch(function (error) {
        console.log(error);
    })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

测试

在这里插入图片描述

（5）axios并发请求

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //并发请求
    function getDemoMethod() {
        return axios.get("http://localhost:8081/demo?id=33&name=xiaoxiao")
    }

    function getTestMethod() {
        return axios.post("http://localhost:8081/test", {id: 44, name: "xiaowu"});
    }

    axios.all([getDemoMethod(), getTestMethod()]).then(axios.spread(function (acct, perms) {
        //两个请求现在都执行完成
        console.log(acct); //acct: 第一个请求后端响应的结果
        console.log(perms); //perms: 第二请求后端响应的结果
    }))
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

测试

在这里插入图片描述

（6）创建实例 `axios.create([config])`

可以使用自定义配置新建一个axios实例发送请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //创建axios的配置对象（实例）
    var instance = axios.create({
        baseURL: "http://localhost:8081/",
        timeout: 5000,
    })

    //发送get方式请求
    instance.get("/demo?id=23&name=xiaozhang").then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    })

    //发送post方式请求
    instance.post("/test", {id: 12, name: "xiaowang"}).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

（7）拦截器

在请求或响应被 then 或 catch 处理前拦截它们

作用：用来将axios中共有参数，响应的公共处理交给拦截器处理，减少axios发送请求时代码冗余

在这里插入图片描述

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue系列课程</title>
</head>
<body>
<div id="app">
    <h1>Axios的基本使用</h1>
</div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
    //创建axios的配置对象（实例）
    var instance = axios.create({
        baseURL: "http://localhost:8081/",
        timeout: 5000,
    })

    //请求拦截器
    instance.interceptors.request.use(function (config) {
        if (config.url.indexOf("?") == -1) {
            config.url += "?token=1234"
        } else {
            config.url += "&token=1234"
        }
        return config;
    })

    //响应拦截器
    instance.interceptors.response.use(function (response) {
        console.log(response);
        //response.data = "xxxx";
        if (response.status == 500) {
            alert("服务器出现错误！")
            return response;
        }
    })

    //发送get方式请求
    instance.get("/demo?id=23&name=xiaozhang").then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    })

    //发送post方式请求
    instance.post("/test", {id: 12, name: "xiaowang"}).then(function (response) {
        console.log(response);
        console.log(response.data);
    }).catch(function (error) {
        console.log(error);
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

测试

在这里插入图片描述

代码仓库

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/867565

Vue实战之axios基本使用_axios在vue中的使用

文章目录

Vue 实战

十、Axios 基本使用

1、引言

2、Axios 第一个程序

（1）搭建后端服务

（2）GET方式请求

（3）POST方式请求

（4）put 方式请求

（5）axios并发请求

（6）创建实例 axios.create([config])

（7）拦截器

代码仓库

（6）创建实例 `axios.create([config])`