Vue3封装Axios跨域请求

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以帮助我们在Vue3中进行网络请求，而不需要使用原生的fetch API或XMLHttpRequest。

在Vue3中，我们可以封装Axios来处理跨域请求，以便我们能够更方便地进行数据交互。

安装Axios

首先，我们需要安装Axios。在命令行中使用以下命令进行安装：

npm install axios

创建Axios实例

在Vue3中，我们需要创建一个Axios实例，用于发送HTTP请求。可以在项目的src目录下新建一个utils文件夹，并在其中创建一个http.js文件。

在http.js文件中，我们需要引入Axios，并创建一个Axios实例：

import axios from 'axios';

const http = axios.create({
  baseURL: '  // 设置请求的基础URL
  timeout: 5000  // 设置请求超时时间
});

export default http;

在上面的代码中，我们使用axios.create方法创建了一个Axios实例，并通过baseURL设置了请求的基础URL，这样在发送请求时就不需要每次都写完整的URL。同时，我们还设置了请求超时时间为5秒。

封装GET请求

接下来，我们可以在http.js文件中继续封装GET请求的方法。在这个方法中，我们可以处理跨域请求。

import http from './http';

export function get(url, params) {
  return new Promise((resolve, reject) => {
    http.get(url, {
      params: params
    }).then(response => {
      resolve(response.data);
    }).catch(error => {
      reject(error);
    });
  });
}

在上面的代码中，我们通过http.get方法发送GET请求，并通过params参数传递请求的参数。接着，我们通过then方法处理请求成功的回调，并通过catch方法处理请求失败的回调。最后，我们通过resolve方法返回请求成功的数据，通过reject方法返回请求失败的错误信息。

封装POST请求

类似地，我们也可以在http.js文件中封装POST请求的方法。同样，我们也可以处理跨域请求。

import http from './http';

export function post(url, data) {
  return new Promise((resolve, reject) => {
    http.post(url, data).then(response => {
      resolve(response.data);
    }).catch(error => {
      reject(error);
    });
  });
}

在上面的代码中，我们通过http.post方法发送POST请求，并通过data参数传递请求的数据。

使用封装的Axios请求

现在，我们已经封装了GET和POST请求的方法，可以在Vue3组件中使用这些方法进行数据交互了。

import { get, post } from '@/utils/http';

export default {
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      get('/api/data', { page: 1 }).then(data => {
        console.log(data);
      }).catch(error => {
        console.error(error);
      });
    },
    postData() {
      post('/api/data', { name: 'John' }).then(data => {
        console.log(data);
      }).catch(error => {
        console.error(error);
      });
    }
  }
}

在上面的代码中，我们通过get方法发送GET请求，并传递了请求的URL和参数。同样地，我们也可以使用post方法发送POST请求。

结论

通过封装Axios，我们能够更方便地进行跨域请求，并且能够统一处理请求的超时时间和错误信息。这样，我们可以更加高效地进行数据交互。

希望本篇文章能够帮助你了解如何在Vue3中封装Axios进行跨域请求。