Vue3.x中集成axios的方法

以前使用Vue2+Vue-CLI的axios比较多,用于和后端对接数据接口。现在更换为Vue3+Vite2后,axios的引入有了一些微妙的变化,这里记录一下引入的过程方便以后回顾。

整体思路:封装axios模块和API,在需要API时直接在对应组件中import使用,比较像之前我在uni-app那篇中使用云函数的封装方法,不过使用uniCloud不需要手动再写引入了。

首先使用包管理器下载axios并引入。

1
2
3
npm install axios --save

yarn install axios

然后并不需要对main.js做任何操作,可以在项目中这样建立文件目录,并在axios文件夹下建立两个js文件:axios.jsapi.js

这里api.js不一定只有一个,如果你的接口很多,可以将多个api拆分为多个文件,便于管理。

image-20210728084623169

然后开始编写axios.js,它是对axios配置的封装。

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
31
32
33
import axios from "axios";

const service = axios.create({
baseURL: "/desktop",
timeout: 5000,
headers: {
"Authorization": "Bearer " + localStorage.getItem("token"),
}
});

service.interceptors.request.use(
function(config) {
// 发送请求前会做的事情
return config;
},
function(error) {
// 请求错误要做的事情
return Promise.reject(error);
}
);

service.interceptors.response.use(
function(response) {
// 2xx的状态码会激活的函数
return response;
},
function(error) {
// 非2xx状态码会激活的函数
return Promise.reject(error);
}
);

export default service;

使用axios.create创建一个service实例,可以向里面传递各种配置信息,比如baseURL,超时时间(单位毫秒),自定义请求头等。我在这里设定了一个Authorization请求头,因为项目中使用到了KeyCloak的token,具体需要设定什么,需要和后端交流,自己的项目一般没有特殊需要的话可以把header这一块直接去掉。

另外,还需要在vite的配置文件里配置一下跨域,在server下这样配置:

1
2
3
4
5
6
7
proxy: {
"/desktop": {
target: "http://你的ip:你的端口/",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},

这个rewrite的意思好像确实没找到..不过先这样带着吧

之后就可以将这个实例导出了,然后在api内调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import service from './axios.js';

// 发起get请求,后面可以拼接字符串等当查询条件
export function getUserApp(id) {
return service.get('/getUserApp/' + id);
}

// 发起post请求,可以后跟params
export function postSth(obj) {
return service.post('/test', {
params: {
obj,
}
})
}

就像这样,每需要一个接口,就export一个函数,直接return传回axios的返回值,这是一个Promise,可以直接使用then,catch等进行调用。

使用方法(composition API写法):

1
2
3
4
5
6
7
8
9
10
11
import { getUserApp } from '../../plugins/axios/api.js'; // 这里的路径是相对路径,使用时根据实际情况修改
import { getCurrentInstance } from 'vue'
export default: {
setup() {
const { proxy } = getCurrentInstance();
getUserApp()
.then(res => {
proxy.data.具体操作(res)
})
}
}

由于在setup中不能使用this,所以这里采用了getCurrentInstance的方案,使用内部对data的proxy访问data。

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信