Axios基本操作

最新推荐文章于 2025-05-30 17:30:15 发布

世昌愿世昌盛

最新推荐文章于 2025-05-30 17:30:15 发布

阅读量380

点赞数

文章标签： spring boot java

本文链接：https://blog.youkuaiyun.com/Harden_zsc/article/details/120888883

版权

Axios基本操作

1 搭建后端环境

1.2 步骤

创建maven项目：day19_axios
导入坐标
编写启动类
编写JavaBean
编写Controller

1.3 实现

创建maven项目：day19_axios

导入坐标

    <!--确定spring boot版本-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.5.RELEASE</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!--web开发启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

编写启动类

package com.czxy;

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

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@SpringBootApplication
public class Day19Application {
    public static void main(String[] args) {
        SpringApplication.run(Day19Application.class, args);
    }
}

编写JavaBean

package com.czxy.domain;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
public class User {
    private String uid;
    private String username;
    private String password;

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public User() {
    }

    public User(String uid, String username, String password) {
        this.uid = uid;
        this.username = username;
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + '\'' +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

编写Controller

package com.czxy.controller;

import com.czxy.domain.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

/**
 * @author 桐叔
 * @email liangtong@itcast.cn
 */
@RestController
@CrossOrigin        //解决跨域问题
@RequestMapping("/user")
public class UserController {

    /**
     * 查询所有
     * @return
     */
    @GetMapping
    public List<User> selectAll() {
        List<User> list = new ArrayList<>();
        list.add(new User("u001","jack","1234"));
        list.add(new User("u002","肉丝","6666"));
        return list;
    }

    /**
     * 添加用户
     * @param user
     * @return
     */
    @PostMapping
    public String save(@RequestBody User user) {
        System.out.println(user);
        return "添加成功";
    }

    /**
     * 修改用户
     * @param user
     * @return
     */
    @PutMapping
    public String update(@RequestBody User user) {
        System.out.println(user);
        return "修改成功";
    }

    /**
     * 通过id删除用户
     * @param uid
     * @return
     */
    @DeleteMapping("/{id}")
    public String delete(@PathVariable("id") Integer uid) {
        System.out.println(uid);
        return "删除成功";
    }

}

2 Axios 概述

axios底层使用Promise对象

Promise对象处理异常程序一种编程方式。

//基本语法
new Promise(....异步代码).then(成功回调函数).catch(失败回调函数)

//
new Promise(....异步代码)
    .then((response响应)=>{成功回调代码})
    .catch((error错误) => {失败回调代码})

什么是axios？
- 用于发送ajax工具。另一种称号“HTTP 客户端”

3 发送各种请求

前提：导入axios.js 类库

//请求方式：get、post、put、delete
axios.请求方式(请求路径,请求参数).then( 成功 ).catch( 失败 )

3.1 get请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        // 发送ajax请求
        // get请求格式：axios.get(url).then().catch()
        var url = 'http://localhost:8080/user'
        axios.get(url)
        .then(response => {
            // 响应数据
            console.log(response.data)
        })
        .catch(err => {
            console.error(err); 
        })
    </script>
</head>
<body>
    
</body>
</html>

3.2 post 请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var user = {
            username: 'jack',
            password: '1234'
        }
        // 发送post请求
        var url = 'http://localhost:8080/user'
        axios.post(url, user)
        .then( response => {
            console.info(response.data)
        })
        .catch( error => {})
    
    </script>
</head>
<body>
    
</body>
</html>

3.3 put请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var url = 'http://localhost:8080/user'
        var user = {
            "uid":"u001",
            "username":"杰克",
            "password":"1234"
        }
        axios.put(url, user)
        .then( response => {
            // 响应结果
            console.info(response.data)
        })
        .catch( error => {})
    </script>
</head>
<body>
    
</body>
</html>

3.4 delete请求

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
        var url = 'http://localhost:8080/user/u001'
        axios.delete(url)
        .then(response=> {
            // 响应结果
            console.info(response.data)
        })
        .catch(error => {})
    </script>
</head>
<body>
    
</body>
</html>