vue实现接口连接

Vue 实现接口连接的常用方法

Vue 中实现接口连接通常需要借助 HTTP 客户端库，以下是几种常见实现方式：

使用 Axios

Axios 是流行的 HTTP 客户端库，支持 Promise API，适用于浏览器和 Node.js 环境。

安装 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);
        });
    }
  }
}

使用 Fetch API

现代浏览器内置的 Fetch API 也可用于接口请求，无需额外安装。

示例代码：

export default {
  methods: {
    async fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}

使用 Vue Resource

Vue Resource 是专为 Vue 设计的 HTTP 客户端，但目前已不再维护。

安装：

npm install vue-resource

使用示例：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

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

封装 API 请求

为提高代码复用性，建议将 API 请求封装成独立模块。

示例封装：

// api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'Content-Type': 'application/json'}
});

export default {
  getData() {
    return apiClient.get('/data');
  },
  postData(payload) {
    return apiClient.post('/data', payload);
  }
}

组件中使用：

import api from './api';

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

处理跨域问题

开发时可能遇到跨域问题，可通过以下方式解决：

配置代理（vue.config.js）：

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

请求时使用：

axios.get('/api/data')

请求拦截和响应拦截

Axios 支持全局拦截器，可用于添加认证信息或处理错误。

示例配置：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 处理未授权情况
  }
  return Promise.reject(error);
});