springboot和vue：十一、Axios网络请求的安装引入与使用、跨域问题解决(CORS)

Axios简介与安装

• Axios是一个基于promise的网络请求库，作用于node.js和浏览器中
• Axios在浏览器端使用XMLHttpRequests发送网络请求，并自动完成json数据的转换
• 安装：npm install axios
• 官方文档：https://www.axios-http.cn/

Axios基础语法

get请求

当参数比较少时，直接在路径里面用问号拼接传入。
then里面的是个回调函数，原始形态是如下：

    axios.get("/user?id=1234")
    .then(function(response){
      //处理成功的情况，走then里面的函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });
1
2
3
4
5
6
7
8
9
10
11
12

当参数比较多时，可以使用params传入。

    axios.get("/user",{
      params:{
        id:12345
      }
    })
    .then(function(response){
      //处理成功的情况，走then里面的函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

但因为回调函数的作用域改变，如果想要在axios里面使用this指针，会报错undefinded，所以更经常的是如下箭头函数的形式，使得回调函数的作用域和其父级相同。

axios.get("/user/findAll")
      .then((response)=> {
        console.log(response);}
        )
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        console.log("请求成功发送");
      });
1
2
3
4
5
6
7
8
9
10

post请求

axios会自动把请求体里的数据，在这里即username和password字段，转成json后传给后端。

axios.post("/user",{
      username: 'shanshan',
      password: '12345'
    })
    .then(function(response){
      //处理成功的情况，走then里面的函数
      console.log(response);
    })
    .catch(function(error){
      //处理错误的情况，走catch里面的函数
      console.log(error);
    })
    .then(function(){
      //总会执行这里面的函数
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

支持async/await用法

    async function getUser() {
      try {
        const response = await axios.get('user?id=12345');
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
1
2
3
4
5
6
7
8

跨域问题

同源策略与CORS

• 同源策略：为了保证浏览器的安全，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。
• 同源：即两个页面具有相同的协议、主机、端口号。
• 为了解决跨域问题，CORS制定了一个技术标准，使得可以在不破坏既有规则的前提下，通过后端服务器实现CORS接口，从而实现跨域通信。
• CORS将请求分为两类：简单请求和非简单请求。

GET、POST、application/x-www-form-urlencoded、multipart/form-data、text/plain等常见的请求属于简单请求。
在后端的controller类上面加一个@CrossOrigin注解，即可使得控制器内所有请求都通过跨域问题。

Axios引入与使用

在main.js里写上

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:8088'
Vue.prototype.$http = axios
1
2
3

在App.vue里发送axios请求，一般在页面被挂载前就发送

export default {
  name: 'App',
  data: function () {
    return {
      movies: [
        { id: 1, title: "金刚狼1", rating: 8.7 },
        { id: 2, title: "金刚狼2", rating: 8.8 },

      ]
    }
  },
  created: function () {
    this.$http.get("/user/findAll")
      .then((response)=> {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        console.log("请求成功发送");
      });
  },
  mounted: function () {
    console.log("app被挂载完毕");
  },
  components: {
    Movie
  }
}
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