vue3实战-axios请求封装问题(get、post、put、delete)

下面是“vue3实战-axios请求封装问题(get、post、put、delete)”的完整攻略。

为什么需要封装请求

在vue3开发过程中,经常需要通过API接口请求数据并渲染到页面上。但是每次都使用axios发起请求会导致代码冗余度高,可维护性低等问题。因此,我们需要对axios进行封装,以提高代码质量和可维护性。

封装过程详解

首先,在src目录下创建一个apis文件夹,用于存放我们的API接口。

其次,在apis文件夹中创建一个index.js文件,该文件用于封装我们的axios请求:

import axios from "axios";

const baseURL = "www.example.com"; // 更换成自己的API接口地址

const axiosIns = axios.create({
  baseURL,
  timeout: 10 * 1000 // 超时时间设置为10秒
});

// 封装get请求
export const get = (url, params) => {
  return axiosIns.get(url,{params})
}

// 封装post请求
export const post = (url, data) => {
  return axiosIns.post(url,data)
}

// 封装put请求
export const put = (url, data) => {
  return axiosIns.put(url,data)
}

// 封装delete请求
export const del = (url, data) => {
  return axiosIns.delete(url,{data})
}

以上代码中,我们创建一个axios实例,并封装了get、post、put、delete四种请求方式。

然后,在main.js文件中引入我们的API方法:

import {get,post,put,del} from '@/apis/index.js'

最后,在其他组件中使用封装好的请求方法即可:

methods:{
  async fetchData(){
    const res = await get('/api/data')
    console.log(res.data)
  }
}

示例说明

下面给出两个示例来说明如何调用封装好的请求方法:

示例一:使用get请求获取数据并展示

<template>
  <div>
    <h1>首页</h1>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import { get } from "@/apis/index.js";

export default {
  data() {
    return {
      dataList: [],
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const res = await get("/api/data"); // 发送get请求获取数据
      this.dataList = res.data; // 将获取到的数据保存到dataList中
    },
  },
};
</script>

以上代码中,我们通过mounted钩子来调用fetchData方法以获取数据。fetchData方法通过调用get方法发送GET请求,然后将获取到的数据保存到dataList中。最后,在页面上遍历dataList来展示获取到的数据。

示例二:使用post请求提交表单数据

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="text" v-model="form.username" />
      <input type="password" v-model="form.password" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import { post } from "@/apis/index.js";

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    async handleSubmit() {
      const res = await post("/api/login", this.form); // 发送post请求提交表单数据
      if(res.status === 200){
        alert('登录成功')
      }else{
        alert('登录失败')
      }
    },
  },
};
</script>

以上代码中,我们在表单中输入用户名和密码后通过提交按钮触发handleSubmit方法。handleSubmit方法通过调用post方法发送POST请求,并传入表单数据作为参数。根据后端接口返回的结果,我们在页面上弹出相应的提示框以提示用户。

阅读剩余 66%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue3实战-axios请求封装问题(get、post、put、delete) - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • winRAR怎么设置使用系统资源优先级为低优先级?

    WinRAR设置使用系统资源优先级为低优先级攻略 在WinRAR中设置使用系统资源的优先级为低优先级可以提高系统的响应速度,防止在RAR压缩或解压缩过程中对系统资源的过度占用。下面是详细的设置步骤: 步骤 1:打开WinRAR首选项 首先,打开WinRAR软件,然后点击工具栏上的”选项”按钮,或者使用快捷键”Alt+O”打开WinRAR首选项。 步骤 2:选…

    other 2023年6月28日
    00
  • PHP 之Section与Cookie使用总结

    PHP 之 Section 与 Cookie 使用总结 什么是 Session? Session 是指在客户端与服务器之间保存状态的一种机制。在 PHP 中,我们可以使用 session_start() 函数来开始一个新 session。一旦 session 开始,可以包含任何我们想要保存的数据。 如何使用 Session? 使用 session_start…

    other 2023年6月27日
    00
  • 红米Note12Pro+开发者在哪?红米Note12Pro+查看开发者方法

    红米Note12Pro+开发者 红米Note12Pro+查看开发者方法 如果您想查看红米Note12Pro+的开发者信息,则可以按照以下步骤进行操作: 点击手机主屏幕上的“设置”图标。 在“设置”菜单中,向下滚动并找到“关于手机”选项。 点击“关于手机”打开该选项,并找到“MIUI版本”。 连续点击“MIUI版本”,即可进入开发者模式。 红米Note12Pr…

    other 2023年6月27日
    00
  • tortoisesvn版本合并(merge)

    TortoiseSVN版本合并(Merge) TortoiseSVN是一个Subversion版本控制系统的Windows客户端。它使用户可以浏览Subversion仓库,检出元数据,并执行更改以发布新代码。TortoiseSVN的一个主要功能是版本合并,也称为Merge。 什么是版本合并? 版本合并是将不同版本的代码或文档的更改合并为一个新版本的过程。版本…

    其他 2023年3月28日
    00
  • java应用程序如何自定义log4j配置文件的位置

    要让java应用程序自定义log4j配置文件的位置,我们需要做下面两个步骤: 1.在程序启动时手动加载log4j配置文件并告诉log4j使用该配置文件。 2.将log4j配置文件的位置放到程序的运行参数中,让用户可以自行指定配置文件的位置。 下面分别对这两个步骤进行详细说明: 步骤1:手动加载log4j配置文件 在java程序中使用log4j进行日志输出时,…

    other 2023年6月25日
    00
  • redistemplate获取过期时间的问题

    以下是关于“RedisTemplate获取过期时间的问题”的完整攻略: 步骤1:获取RedisTemplate实例 在使用RedisTemplate获取过期时间之前,需要获取RedisTemplate实例。可以使用以下代码获取RedisTemplate实例: @Autowired private RedisTemplate<String, Object…

    other 2023年5月7日
    00
  • 使用变量动态设置js的属性名

    使用变量动态设置 JavaScript 的属性名可以通过两种方式实现:点符号和方括号符号。 1. 点符号 使用点符号可以直接在对象上设置属性名,但是属性名必须是一个有效的标识符。 示例1:动态设置属性名为变量值 const propertyName = ‘name’; const obj = {}; obj[propertyName] = ‘John’; c…

    other 2023年8月9日
    00
  • 使用vue组件封装共用的组件

    那么这里我将详细讲解一下使用Vue组件封装共用的组件的完整攻略。 前置知识 在学习使用Vue组件封装共用的组件前,需要掌握Vue基础知识和组件的使用方法。如果还没有掌握,可以先学习Vue教程以及组件的使用方法。 Vue组件封装共用的组件的步骤 下面是Vue组件封装共用的组件的步骤: 1. 创建共用的组件 首先需要创建共用的组件。这个组件应该是一个通用的组件,…

    other 2023年6月25日
    00
合作推广
合作推广
分享本页
返回顶部