vue3 axios 设置默认端口号

原创

mob649e81540090 2023-10-27 12:22:37 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81540090的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue3 Axios 设置默认端口号

简介

Axios 是一个基于 Promise 的 HTTP 客户端，用于发送 HTTP 请求。Vue3 是一款流行的 JavaScript 框架，用于构建用户界面。在 Vue3 中，我们可以使用 Axios 进行网络请求。本文将教你如何在 Vue3 中设置默认的端口号。

整体流程

下面是整个设置默认端口号的流程：

flowchart TD
    A[创建 Vue 项目] --> B[安装 Axios]
    B --> C[创建一个 API 文件]
    C --> D[设置默认的端口号]

步骤详解

第一步：创建 Vue 项目

首先，我们需要创建一个 Vue 项目。可以使用 Vue CLI 来快速生成一个 Vue 项目。在命令行中执行以下命令：

vue create my-project
cd my-project

这会创建一个名为 my-project 的新 Vue 项目，并进入该项目的根目录。

第二步：安装 Axios

接下来，我们需要安装 Axios。在命令行中执行以下命令：

npm install axios

这会在项目中安装 Axios，并将其添加到依赖项中。

第三步：创建一个 API 文件

在项目的根目录下创建一个名为 api.js 的文件。这个文件将用于封装我们的 API 请求。

在 api.js 文件中，引入 Axios 并创建一个 Axios 实例。然后，设置默认的端口号。

import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create();

// 设置默认的端口号
instance.defaults.baseURL = 'http://localhost:8080';

export default instance;

在上面的代码中，我们首先引入了 Axios。然后，使用 axios.create() 方法创建了一个 Axios 实例，并将其赋值给 instance 变量。接下来，我们通过 instance.defaults.baseURL 设置了默认的端口号为 http://localhost:8080。

第四步：使用 API 文件

现在，我们已经设置了默认的端口号，我们可以在其他组件中使用这个 API 文件进行网络请求。

首先，我们需要在组件中引入 API 文件。可以在组件的顶部添加以下代码：

import api from './api';

接下来，我们可以在组件的方法中使用这个 API 文件进行网络请求。例如，我们可以在 created 钩子函数中发送一个 GET 请求：

export default {
  created() {
    api.get('/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.error(error);
      });
  }
}

在上面的代码中，我们使用 api.get('/data') 发送一个 GET 请求，并在 then 方法中处理成功的响应，将响应的数据打印到控制台上。在 catch 方法中处理请求失败的情况。