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%