跨域请求的封装利器：Vue3+TS实现多域接口无缝调用

跨域请求的挑战

在前端开发中，跨域请求是一个常见的问题。浏览器同源策略限制了前端代码只能与相同源（协议、域名和端口）的后端服务器进行通信。当需要从不同域的服务器获取数据时，就会出现跨域请求的错误。

Vue3+TS封装请求多域接口的解决方案

为了解决跨域请求的挑战，本文介绍了一种使用Vue3和TypeScript封装请求多域接口的解决方案。该解决方案利用了Axios库来处理跨域请求，并使用Vuex来管理请求状态和数据。

1. 安装依赖

首先，需要安装Axios和Vuex库：

npm install axios vuex

2. 创建Axios实例

接下来，创建一个Axios实例，并设置跨域请求的配置：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  withCredentials: true,
});

3. 封装请求方法

然后，可以封装一个请求方法，用于发送跨域请求：

export const fetchApi = (url, data) => {
  return instance.post(url, data).then((res) => res.data);
};

4. 使用Vuex管理请求状态和数据

最后，可以使用Vuex来管理请求状态和数据。创建一个名为api的Vuex模块，并定义以下状态和操作：

const api = {
  state: {
    loading: false,
    data: null,
    error: null,
  },
  mutations: {
    setLoading(state, loading) {
      state.loading = loading;
    },
    setData(state, data) {
      state.data = data;
    },
    setError(state, error) {
      state.error = error;
    },
  },
  actions: {
    fetchApi({ commit }, payload) {
      commit('setLoading', true);
      return fetchApi(payload.url, payload.data)
        .then((data) => {
          commit('setData', data);
        })
        .catch((error) => {
          commit('setError', error);
        })
        .finally(() => {
          commit('setLoading', false);
        });
    },
  },
};

5. 使用封装的请求方法和Vuex状态

在组件中，可以使用封装的请求方法和Vuex状态来获取数据：

import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('api', ['loading', 'data', 'error']),
  },
  methods: {
    ...mapActions('api', ['fetchApi']),
  },
};

这样，就可以在组件中轻松地调用fetchApi方法来发送跨域请求，并使用Vuex状态来获取请求状态和数据。

总结

本文介绍了一种使用Vue3和TypeScript封装请求多域接口的解决方案。该解决方案利用了Axios库来处理跨域请求，并使用Vuex来管理请求状态和数据。通过这种方式，可以轻松应对跨域请求的挑战，实现不同域接口的无缝调用。

示例代码

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: (h) => h(App),
}).$mount('#app');

// App.vue
<template>
  <div>
    <h1>{{ loading ? 'Loading...' : 'Data' }}</h1>
    <pre>{{ data | json }}</pre>
    <pre>{{ error }}</pre>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('api', ['loading', 'data', 'error']),
  },
  methods: {
    ...mapActions('api', ['fetchApi']),
    fetchData() {
      this.fetchApi({ url: 'https://api.example.com/data' });
    },
  },
};
</script>

// store.js
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    api,
  },
});

export default store;

扩展阅读

• 浏览器同源策略
• Axios库
• Vuex库