接口封装案例"/>
用vue实现接口封装案例
以下是一个简单的 Vue.js 接口封装案例:
-
新建一个
api.js
文件,用于封装接口请求:import axios from 'axios'// 创建 axios 实例 const instance = axios.create({// API 地址baseURL: '/',// 超时时间timeout: 10000 })// 封装 GET 请求 function get(url, params) {return instance.get(url, { params }) }// 封装 POST 请求 function post(url, data) {return instance.post(url, data) }// 导出函数 export default {get,post }
-
在 Vue 组件中使用封装好的接口请求:
<template><div><h1>{{ message }}</h1></div> </template><script> import api from './api'export default {data() {return {message: ''}},created() {api.get('hello', { name: 'world' }).then(response => {this.message = response.data.message}).catch(error => {console.error(error)})} } </script>
在上面的例子中,api.js
文件封装了 get()
和 post()
两个函数,用于 GET 和 POST 请求。在 Vue 组件中,通过 import api from './api'
引入封装好的请求函数,然后使用 api.get()
发起 GET 请求并传入参数。在请求成功后,将请求返回的数据通过 response.data
获取到,并将其赋值给 message
属性,最终在模板中渲染出来。
使用这种封装方式可以使代码更加模块化,方便维护和更新。同时也可以有效地解耦前端代码和后端接口,使得代码更加清晰易懂。
更多推荐
用vue实现接口封装案例
发布评论