vue 实现接口调用

使用 Axios 进行接口调用

安装 Axios 依赖：

npm install axios

在 Vue 组件中引入并使用：

import axios from 'axios';

export default {
  methods: {
    fetchData() {
      axios.get('https://api.example.com/data')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}

封装 API 请求模块

创建 api.js 文件统一管理接口：

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

export const getData = () => api.get('/data');
export const postData = (payload) => api.post('/data', payload);

在组件中使用封装后的 API：

import { getData } from '@/api';

export default {
  methods: {
    async loadData() {
      try {
        const response = await getData();
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}

使用 Vuex 管理接口状态

在 store 中定义接口相关状态：

import { getData } from '@/api';

export default {
  state: {
    data: null,
    loading: false,
    error: null
  },
  mutations: {
    setData(state, payload) {
      state.data = payload;
    },
    setLoading(state, payload) {
      state.loading = payload;
    },
    setError(state, payload) {
      state.error = payload;
    }
  },
  actions: {
    async fetchData({ commit }) {
      commit('setLoading', true);
      try {
        const response = await getData();
        commit('setData', response.data);
      } catch (error) {
        commit('setError', error.message);
      } finally {
        commit('setLoading', false);
      }
    }
  }
}

处理请求拦截和响应拦截

在 Axios 实例中添加拦截器：

api.interceptors.request.use(config => {
  // 添加请求头等预处理
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, error => {
  return Promise.reject(error);
});

api.interceptors.response.use(response => {
  // 响应数据预处理
  return response.data;
}, error => {
  // 统一错误处理
  if (error.response.status === 401) {
    router.push('/login');
  }
  return Promise.reject(error);
});

使用 async/await 语法

推荐使用 async/await 处理异步请求：

export default {
  methods: {
    async submitForm() {
      try {
        const response = await api.post('/submit', this.formData);
        this.$message.success('提交成功');
      } catch (error) {
        this.$message.error(error.message);
      }
    }
  }
}

处理跨域问题

在开发环境中配置代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

取消重复请求

使用 Axios 的 CancelToken 防止重复请求：

const pendingRequests = new Map();

function addPendingRequest(config) {
  const requestKey = `${config.method}-${config.url}`;
  config.cancelToken = new axios.CancelToken(cancel => {
    if (!pendingRequests.has(requestKey)) {
      pendingRequests.set(requestKey, cancel);
    }
  });
}

function removePendingRequest(config) {
  const requestKey = `${config.method}-${config.url}`;
  if (pendingRequests.has(requestKey)) {
    const cancel = pendingRequests.get(requestKey);
    cancel();
    pendingRequests.delete(requestKey);
  }
}

api.interceptors.request.use(config => {
  removePendingRequest(config);
  addPendingRequest(config);
  return config;
});

api.interceptors.response.use(response => {
  removePendingRequest(response.config);
  return response;
});