Vue请求后端数据示例代码，如何改写为长尾？

本文共计666个文字，预计阅读时间需要3分钟。

在Vue中，我们如何通过请求接口来访问后端数据呢？以下是一个简单示例：

主要问题：如果不封装代码，每次请求时都要写一串底层的代码，会造成代码冗余。

1. 使用axios库发送请求：javascriptimport axios from 'axios';

function fetchData() { axios.get('/api/data') .then(response=> { console.log(response.data); }) .catch(error=> { console.error(error); });}

2. 封装请求方法：javascriptimport axios from 'axios';

const api=axios.create({ baseURL: 'https://api.example.com'});

function fetchData() { return api.get('/data') .then(response=> response.data) .catch(error=> { console.error(error); return null; });}

在vue中，我们如何通过请求接口来访问后端的数据呢？在这里简单总结了一个小示例：

主要问题：如果不封装的话，在每次请求的时候都要书写一遍下面的代码，造成代码冗余。

1、在src目录下创建一个utils文件夹，然后在里面创建一个js文件。这里我创建了一个request.js文件。

/*引入axios*/ import axios from 'axios' const request = axios.create({ baseURL: 'localhost:8280/user', // 基础路径,将统一的部分全部封装 withCredentials: true // 表示请求可以携带cookie }) //前端采用export.default，在写后端代码时用module.export export default request

在app.vue中进行测试：

<script> import request from './utils/request' export default { created() { request({ method:'GET', url:'/products', params:{test:'111',hello:'world'}, }) }, } </script>

2、在src文件夹下创建一个api文件夹，根据不同的功能进行分组，分别写不同的接口。这里我创建了一个product.js。

import request from '../utils/request'; export function getList(params={}) { return request({ methods:'GET', url:'/products', params, }) } export function getProduct(id) { return request({ methods:'GET', url:'/products/${id}', }) } export function update(id,data) { return request({ methods:'PUT', url:'/products/${id}', data, }) }

3、在api文件夹下创建index.js

import products from './products'; export default{ products, }

4、在main.js中引入api文件夹下的index。

import api from './api/index.js'; Vue.prototype.$api = api

5、此时通过接口获取后端数据的方式就变成了如下格式:

getProducts(){ this.$api.products.getList(this.query).then((response)=>{ this.products = response.data.data this.total = response.data.total }) }

6、列表展示案例：

main.js中添加代码

import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios'; //Vue.prototype.$api.github.com/search/users?q=${this.keyWord}`).then( res =>{ console.log("请求成功") //提供数据：search组件要给list组件传递数据，就要触发list组件中的自定义事件并携带要传递的数据 //请求成功后更新list里面的数据 this.$bus.$emit("updateListDate",{isLoading:false,errMsg:'',users:res.data.items}) }, error =>{ console.log("请求成功",error.message) //请求失败后更新list里面的数据 this.$bus.$emit("updateListDate",{isLoading:false,errMsg:error.message,users:[]}) } ) } }, } </script> <style scoped> </style>

注：Vue全局事件总线$bus安装与应用可以参考下面的地址：

Vue全局事件总线$bus安装与应用

到此这篇关于vue请求后端数据的文章就介绍到这了,更多相关vue请求后端数据内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！