Vue3.x中集成axios的方法

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

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

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

npm install axios --save

yarn install axios

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

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

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

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下这样配置：

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

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

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

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写法）：

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。

打赏