axios

最新推荐文章于 2023-05-27 11:51:32 发布

古月日月衣羊

最新推荐文章于 2023-05-27 11:51:32 发布

阅读量2.2k

点赞数

分类专栏：前端文章标签： axios

本文链接：https://blog.csdn.net/qq_43478625/article/details/121798559

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

axios

一、概述
- 简介
- 特性
二、基本使用
- 发送异步请求
三、axios-拦截器

一、概述

简介

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios前端异步请求库类似jQuery ajax技术
ajax用来在页面发起异步请求到后端服务，并将后端服务响应数据渲染到页面上

axios总结
用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新页面局部
官方定义:
axios异步请求库并不是vue官方库第三方异步库在vue中推荐axios
易用、简介且高效的http库==> 发送http异步请求库

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

特性

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

二、基本使用

1.下载核心js文件
https://unpkg.com/axios/dist/axios.min.js
2.页面引入axios核心js文件

<script src="js/axios.min.js"></script>

发送异步请求

get

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>
    axios的基本使用
  </div>
</body>
</html>
<script src="js/axios.min.js"></script>
<script>
  //发送axios的get方式请求
  axios.get("http://localhost:8080/demo?id=21&name=xiaochen")
       .then(function(res) {//代表请求成功之后处理
         console.log(res);
         console.log(res.data)
       }).catch(function (err) {//代表请求失败之后处理
         console.log(err);
  })
</script>

AdminController

@RestController //代表接口中返回的都是json格式数据
@CrossOrigin //运行所有的请求 所有域访问 解决：跨域问题
public class AdminController {
    //测试接口
    @GetMapping("demo")

    public String demo(){
        System.out.println("demo...");
        return "demo ok";
    }

}

测试
接收参数

	//测试接口
    @GetMapping("demo")
    public String demo(@RequestParam("id") String id, @RequestParam("name") String name){
        log.info("demo ok ....");
        log.info("id:{} name:{}", id, name);

        System.out.println("demo...");
        return "demo ok";
    }

测试

post

前端

//发送一个post请求
  axios.post("http://localhost:8080/test")
      .then(function(res) {//代表请求成功之后处理
          console.log(res);
          console.log(res.data)
      }).catch(function (err) {//代表请求失败之后处理
      console.log(err);
  })

后端

	@PostMapping("test")
    public String test(){
        log.info("test ok ....");
        System.out.println("test...");
        return "test ok";
    }

测试
前端传参

	//发送一个post请求
  axios.post("http://localhost:8080/test",{id: 23,name: "hmx"})
      .then(function(res) {//代表请求成功之后处理
          console.log(res);
          console.log(res.data)
      }).catch(function (err) {//代表请求失败之后处理
      console.log(err);
  })

后端

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

        System.out.println("test...");
        return "test ok";
    }

测试

请求配置

  //创建axios的配置对象
  var instance = axios.create({
      baseURL:"http://localhost:8080/",
      timeout: 5000,
  });

  //发送get方式请求
  instance.get("/demo?id=11&name=hmx").then(function(res) {//代表请求成功之后处理
      console.log(res);
      console.log(res.data)
  }).catch(function (err) {//代表请求失败之后处理
      console.log(err);
  })

  instance.post("/test",{id:23,name:"hmx"})
      .then(function(res) {//代表请求成功之后处理
          console.log(res);
          console.log(res.data)
      }).catch(function (err) {//代表请求失败之后处理
      console.log(err);
  })