Vue3 axios请求_vue3请求数据axios

---

前言

这篇文章里的所有操作都是在Vue3 + Cli4.5.x的环境下进行的.

---

一、安装

安装步骤和在vue2里的安装没有区别,使用npm安装即可.

npm i axios --save
1

---

二、请求数据

该尽量避免在每个组件中单独请求数据, 不然接口一旦改动, 前端所有使用这个接口的地方都要改, 不仅如此分开进行的多次请求还会增大对服务器的压力;
下面例子在 src/api/request.js 里完成整个项目的数据请求.

抽离式

先在request.js里create几个axios实例, 比如要用到三个baseURL完全不同的接口, 那就写三个实例:

//这是在reqest.js里
const instance1 = axios.create({
    baseURL: 'http://xxxxx.com:3000',
    timeout: 5000,
});

const instance2 = axios.create({
    baseURL: 'http://xxxx.com:3000',
    timeout: 5000,
});

const instance3 = axios.create({
    baseURL: 'http://xxxx.com:3000',
    timeout: 5000,
});

//export default instance1;
export default { instance1, instance2, instance3 };
//这里是把所有方法一起暴露, 引入是整体, 用的时候记得拆开;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

组件:

//<script setup>

import allInstance from "../api/request";  
import { onMounted } from "vue";

onMounted(() => {
  get();
});

const get = () => {
  allInstance.instance1.get("/getHottest").then((res) => {
    console.log(res);
  });
};
//allInstance包含了三个方法, 这里只用instance1;
//</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在组件里发请求的时候, 用于请求的代码要尽可能的少, 因为这跟组件本身内容几乎毫无关系, 所以能写到request.js里的就不要写到组件里.

---

简式

做请求少的时候可以用这种.
写的时候比较爽, 改的时候比较酸爽.
要是跨域或者接口改动, 真的是要回来一个文件一个文件的改…

axios.defaults.baseURL = 'http://xxx.xxx.xx.xxx:3000';
axios.post("/login", {
            username:"baiX"
          })
     .then((res) => {
       console.log(res);
     });
1
2
3
4
5
6
7

---

并发请求

axios.all(): 用于同时发送多个请求, 这个一般在onMounted或者create这种时候, 页面第一次加载. 需要发送多个请求.

//request.js
import axios from "axios";

const instance1 = axios.create({
    baseURL: 'http://x.xxx.xx.xxx:3000',
    timeout: 5000,
});

export default instance1;
1
2
3
4
5
6
7
8
9

//<script setup>

import axios from "axios";
import instance1 from "../../api/request";
import { onMounted } from "vue";
//导出方用export default导出, 引入不用加括号, export导出要加不然会警告

onMounted(() => {
  getall();
});

function get1() {
  return instance1.get("/getHottestArticle");
}

function get2() {
  return instance1.get("/getLatestArticle");
}

function getall() {
  axios.all([get1(), get2()]).then((res) => {
    console.log(res);
  });
}

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

当然, 直接在axios.all()里写好几个请求也是可以的, 就是不好看啊…

---

三、保存数据

上表的语句书写正确仅能完成数据的请求,JS是有内存回收机制的,即便成功请求到, 数据还是会在方法执行完后被连同方法一起销毁,我们得先把数据及时的保存下来.

选择保存在setup()里或者setup的reactive里:

//<script setup>
import { onMounted, reactive } from 'vue';
import allInstance from '@/api/request';

let something = '';

const qingqiu = () => {
  allInstance.instance1.post('/toGetSomething', {
    username: "unknown"
  })
    .then((res) => {
      something = res;
    })
}

//<script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果是放到了setup()的data里:

//<script setup>
import { onMounted, reactive } from 'vue';
import allInstance from '@/api/request';

let data = reactive({
  something: '',
})

const qingqiu = () => {
  allInstance.instance1.post('/toGetSomething', {
    username: "unknown"
  })
    .then((res) => {
      data.something = res;
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当然, push()之类的这种处理方法也可以用, 在then()里处理好res, 再赋值到setup里保存.
还有localStorage 和 sessionStorage 也很好用;

---

四、config配置项

---

总结

2022-5-2, 修缮了亿下, 改了一堆过时的语法和用法…