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请求,并传入表单数据作为参数。根据后端接口返回的结果,我们在页面上弹出相应的提示框以提示用户。

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

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

相关文章

  • JS 加载性能Tree Shaking优化详解

    下面是关于JS加载性能Tree Shaking优化的详细攻略。 一、什么是Tree Shaking Tree Shaking是指编译器在打包时去除无用的代码,使打包出来的文件更小更易于传输。在JavaScript中,Tree Shaking通常用于移除未被使用的模块中的导出(export)。 Tree Shaking利用了ES6的模块化规范中所有的导入(im…

    other 2023年6月25日
    00
  • 获取App.config配置文件中的参数值

    获取App.config配置文件中的参数值可以通过.NET Framework中的ConfigurationManager类实现。 具体步骤如下: 在项目中添加App.config文件,添加相应的配置项。示例代码如下: <?xml version="1.0" encoding="utf-8" ?> <…

    other 2023年6月25日
    00
  • kali中john的使用方法

    Kali中John的使用方法的完整攻略 John the Ripper是一款常用的密码破解工具,可以在Kali Linux中使用。本文将介绍在Kali中使用John的完整略,包括两个示例说明。 步骤一:安装John 在使用John之前,需要先安装John。可以使用以下命令在Kali Linux中安装John: sudo apt-get update sudo…

    other 2023年5月9日
    00
  • ZooKeeper入门教程一简介与核心概念

    ZooKeeper入门教程一:简介与核心概念 简介 ZooKeeper是一个分布式的解决方案,它可以用来管理和协调分布式应用程序。ZooKeeper可以用于实现诸如分布式锁、服务发现和集群管理等功能。ZooKeeper的设计目标是提供一个高性能、高可靠性、具备严格顺序性、支持分布式部署的专用协调服务。 核心概念 ZNode ZNode是ZooKeeper的数…

    other 2023年6月27日
    00
  • Android开发之TextView控件用法实例总结

    Android开发之TextView控件用法实例总结 1. 介绍 TextView是Android中最简单也是最常用的控件之一,它用于在屏幕上显示文本信息。本篇文章将介绍TextView控件的基本用法以及常见的属性设置。 2. 属性设置 以下是TextView常用的属性设置: text:设置TextView显示的文字。 textColor:设置TextVie…

    other 2023年6月27日
    00
  • python中proto的repeated

    Python中Proto的Repeated 在Python中使用Proto时,我们可以使用Repeated字段类型来表示重复的数据。以下是Python中Proto的Repeated的完整攻略。 步骤 以下是在Python使用Proto的Repeated的步骤: 定义Proto文件。 使用prot编译Proto文件。 在Python中导入生成的Python文件…

    other 2023年5月6日
    00
  • ArcGIS怎么修改属性表字段名称

    ArcGIS是一款专业的地理信息系统软件,属性表是ArcGIS中一个很重要的组成部分,它存储了地理数据的各种属性信息,包括字段名称、数据类型、值等等。在ArcGIS中修改属性表字段名称,可以通过以下步骤实现: 1. 打开属性表 首先,需要打开需要修改字段名称的图层的属性表。可以通过“图层属性”中的“打开属性表”按钮或者在图层上右键点击后选择“打开属性表”来打…

    other 2023年6月25日
    00
  • Android实现分享功能

    以下是使用标准的Markdown格式文本,详细讲解Android实现分享功能的完整攻略: Android实现分享功能 步骤1:添加分享按钮 首先,在您的Android应用界面中添加一个分享按钮,可以是一个图标或者文本按钮。例如: <Button android:id=\"@+id/btn_share\" android:layout…

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