【功能实现】axios实现动态数据

1.安装axios

javascript 复制代码
npm i axios

2.axios调取数据

javascript 复制代码
	import { onMounted,ref } from "vue"
	const titleList=ref([])

    //获取数据库数据,将数据赋值给titleList
	 const getArticles = async () => {
	    const result = await axios.get('http://127.0.0.1:3000/getAccount')
	     titleList.value = result.data.data
	 	console.log(result.data.data);
	 }

    //调用getArticles方法
	onMounted(()=>{
		getArticles()
	})

3.页面使用数据

javascript 复制代码
 <template v-for="item in titleList" :key="item.id">
	        <routerLink :to="`/detail/${item._id}`" class="posts-item shadow-box">
	            <div class="posts-item__infos">
	                <div class="info__dates"><span class="yyc yy-date"></span><span>发布于 2024-12-06</span></div>
	                <h3 class="info__title">{{item.title}}</h3>
	                <div class="info__total">
	                    <div class="total__item"><span class="yyc yy-fire"></span><span>33阅读</span></div>
	                    <div class="total__item"><span class="yyc yy-comment"></span><span>22条评论</span></div>
	                    <div class="total__item"><span class="yyc yy-heart"></span><span>YYF</span></div>
	                </div>
	            </div>
	        </routerLink>
	    </template>

4.优化

1.新建utils文件夹,存放工具,新建request.ts文件

javascript 复制代码
import axios from 'axios'

const http= axios.create({
	 baseURL: '/api',// 通用请求地址前缀
	  timeout: 10000,//超时时间
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });
export default http

2.新建api文件夹,在文件夹下新建index.ts文件

javascript 复制代码
import http from '../utils/request.js'

//请求全部文章数据
export const getArticles= () =>{
	//返回一个promise对象
	return http.get('http://127.0.0.1:3000/getArticle')
}

3.在首页直接调用使用

javascript 复制代码
	import { getArticles } from "../api";
	import { onMounted,ref } from "vue"
	const titleList=ref([])

	
	getArticles().then((data)=>{
		    titleList.value = data.data.data
			console.log(data.data.data);
	})
	

	onMounted(()=>{
		getArticles()
	})

4.好处

对于api的集中存放,增加代码规范化,后期更好维护

相关推荐
姑苏洛言6 分钟前
在开发扫码小程序中,遇到胡坑“require() 默认不支持绝对路径”及其解决方案
前端
Passerby_K7 分钟前
vue3+dhtmlx 甘特图真是案例
前端·vue·甘特图
佳腾_13 分钟前
【Web应用服务器_Tomcat】二、Tomcat 核心配置与集群搭建
java·前端·中间件·tomcat·web应用服务器
brzhang43 分钟前
代码即图表:dbdiagram.io让数据库建模变得简单高效
前端·后端·架构
三巧1 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
SummerGao.1 小时前
【解决】layui layer的提示框,弹出框一闪而过的问题
前端·layui
软件技术NINI1 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码1 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪1 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试
街尾杂货店&1 小时前
css word
前端·css