Vue实战之axios基本使用

已于 2023-02-24 21:23:20 修改
阅读量1.6k 收藏 8
点赞数 3
文章标签： vue
于 2021-07-29 04:44:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44950987/article/details/119129432
版权

文章目录

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 第一个程序

（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>

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

server.port=8081

（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);
    }
}
  • 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 ";
    }
}
  • 实体类
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;
    }
}
（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...";
    }
}
  • 前端代码
<!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>
  • 测试

在这里插入图片描述

（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 ";
    }
}
  • 前端代码
<!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>
  • 测试

在这里插入图片描述

（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 ";
    }
}
  • 前端代码
<!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>
  • 测试

在这里插入图片描述

（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>
  • 测试

在这里插入图片描述

（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>
（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);
});
  • 代码示例
<!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>
  • 测试

在这里插入图片描述

在这里插入图片描述

代码仓库

9.冄2.7.號
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
axios在vue中的使用
前端报刊
03-26 3万+
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0, name:'小明', age:20, sex:'男' }, getters: { doneTodos(state) { return state.count; }, mapName(state){ .
Vue.js实战之使用Vuex + axios发送请求详解
12-12
Vuex 的安装将不再赘述，可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个...
3分钟让你学会axios在vue项目中的基本用法（建议收藏）
m0_64590669的博客
12-18 2161
3分钟让你学会axios在vue项目中的基本用法
【Vue学习笔记】Axios使用
biancheng_的博客
03-30 1583
Axios是一个基于Promise的HTTP请求库，可以用于浏览器和Node.js平台。它可以帮助我们发送异步HTTP请求，处理HTTP响应，并支持拦截器、取消请求、自动转换JSON等功能，是一个非常强大和灵活的HTTP请求库。
VUE之axios总结
m0_60027772的博客
09-21 4182
Axios（ajax input output system）是一个开源的可以用在浏览器端和node.js端的异步通信框架，他的主要作用是实现ajax异步通信。
【Vue 快速入门系列】一文透彻vue中使用axios及跨域问题的解决
一个非常Cool的人
12-15 3779
Axios（ajax i/o system）,是Vue创建者主推的请求发送方式，因其简单的配置与良好的性能被前端爱好者所喜爱。众所周知，在进行网页设计时经常需要从后端拿数据，在Web应用初期会将整个页面或者文档直接拿过来，随着Web应用的发展，人们对性能的不断提升，逐渐向无页面刷新从后端获取数据，而axios就是其中一种新兴、火热的方式。在学习本篇博客时，不需要太过于了解请求的发送过程，但需要对各种请求方式有一个大致的认识。本文将会从0到1的介绍vue中如何使用axios，并结合项目实例加深大家印象。
vue中axios的介绍及封装(看这一篇就够了!)
唯见青山不见君
11-25 4980
vue中axios的介绍及封装(看这一篇就够了!)
Vue axios 详细介绍（核心使用、封装、个性化配置，破万字）
最新发布
2303_79056168的博客
04-04 990
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！配置的优先顺序如上我们讲了几种传入配置的请求方式，那么他们之间的优先级如何？自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
vant+vue3+axios从0到1(实战，有问题留言)
10-28
vant+vue3+axios从0到1(实战，有问题留言)
VUE实战开发.pptx
08-04
VUE实战开发是指使用VUE框架进行Web开发的实践过程。本课程涵盖了VUE框架的各个方面，包括VUE的安装、数据驱动和双向绑定、模板语法、事件处理、表单控件、计算属性、监听、全局组件、过滤、父子组件传值、兄弟组件...
在vue中使用axios作交互时，为什么会调用两次接口
04-20
原来在 CORS-跨域资源共享 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。览器先询问服务器，当前网页的域名是否在服务器的许可名单之中，及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。 当你的Content-Type设置为“application/json;charset=utf-8”并自定义请求头可能就会导致这种情况。但并不会产生什么影响。
vue中封装axios的方法以及如何使用
01-03
封装axios 在vue中常用的请求方式就是axios，下面讲解axios的封装方式 第一步，需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步，定义新的axios let instance = axios.create({ timeout:10000,//请求时间超过10000ms就中断 baseURL:'/api', }) 注意：这里可将baseURL放入其中，便于代码的统一，也可将其放入main文件中 第三步，设置请求拦截 instanc
Vue实战教程之仿肯德基宅急送App
12-12
vue + webpack + vuex + axios 文件目录 │ App.vue │ main.js │ ├─assets │ logo.png │ ├─components │ │ cartcontrol.vue │ │ code.vue │ │ coupon.vue │ │ mineHeader.vue │
Vue知识系列-axios
weixin_51725434的博客
01-16 1721
1. axios的使用
vue中axios的使用
qq_47230378的博客
01-06 114
vue中axios的使用
在Vue中axios的请求方法
Delusion__123的博客
11-11 1816
在Vue中axios的请求方法
vue项目使用axios
z1815367894的博客
07-04 121
3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。局部使用(在某一个组件中用)全局使用(在任意组件中用)
vue+vite+pinia+axios+vue-router使用
weixin_42401291的博客
12-29 2279
vue+vite+pinia+axios+vue-router使用
vue3 axios封装form
08-24
在Vue3中，你可以使用axios来封装form-data请求格式。首先，在Vue项目中引入axios库。然后，你可以创建一个封装axios请求的函数，在这个函数中设置请求格式为form-data。引用中的代码示例展示了如何使用axios封装get...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

9.冄2.7.號

你的鼓励将是我创作的巨大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值