vue axios请求,vue通过axios获取数据
本文主要介绍了Vue3使用axios在Setup中请求值的方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
安装程序使用axios请求获得的值。Vue3设置使用知识点。
Setup中使用axios请求获取的值
上一次，我们使用axios对项目进行网络请求。从此，项目数据不再是静态的。写这篇日记，讲述后端返回的值如何赋给数据中的变量并给出数据响应，从而记录踩坑的过程。
axios返回的项目数据不能由函数返回值返回。怎么才能得到返回值？
脚本
从“vue”导入{ defineComponent，reactive，onMounted，toRefs，ref }；
从“@/api/api”导入{ getProjectDetailAPI }；
导出默认定义组件({
setup() {
//这里定义了一个结构来保存项目信息。
var数据=反应({
项目数据：[]，
projectDetailData: []，
});
函数GetProjectDetail(obj) {
const pid=obj.pid
getProjectDetailAPI({ ProjectID:PID })。然后((结果)={
/*Data.projectDetailData这个变量就是我们定义的反应对象。
所以你打印出他是一个数据代理的实例，而不是array()，所以你想把
把消息数据复制到里面，需要使用深层复制*/
data . project detail data=JSON . parse(JSON . stringify(result . data))；
})。catch((err)={
console . log(err)；
});
}
//挂载后调用函数获取项目数据
onMounted(()={
get project data()；
});
返回{
//解构数据结构，让模板可以直接调用数据中的对象。
.toRefs(数据)，
};
},
});
/脚本
Vue3+Setup使用知识点
脚本语言设置
从导入{getCoupon}。/request ；//请求//包含接口，这里是getCoupon的接口。
从“vue”导入{ onMounted，reactive，ref，getCurrentInstance，on activated }；
从“vue-router”导入{ useRoute，user outer }；
const route=user oute()；//获取路由参数
const router=user outer()；//获取路由对象
const emit=define emits([ down step ])；//初始化由emit调用的方法
Const props=defineProps({//初始化prop的内部参数
id:数字，
离开：{
类型：字符串，//类型
默认值：“级别1”//默认参数
}
});
let name=ref()；//ref初始化公共参数
设obj1=reactive({//ref初始化复杂对象参数
姓名：老王，
年龄：“50岁”，
测试：{
工资：3000，
年份：1，
},
});
设obj2=ref({//ref也可以初始化复杂对象参数。
姓名：老王，
年龄：“50岁”，
测试：{
工资：3000，
年份：1，
},
});
//ref和reactive都可以初始化复杂的对象参数，只是使用上有所不同。
console . log(obj 1 . name)；
console . log(obj 2 . value . name)；
console . log(name . value)；//ref需要。值，但无功不受影响。
Watch (name，(newval，old value)={//监听单个基本数据类型(ref)
console.log(newVal，old value)；
});
Const getList=async (a)={//async函数
let data=await get coupon({ a })；
};
Const getBtnClick=()={//普通函数
emit(downStep ，1)；//对比一下这个。vue2中的$emit
console . log(props . id)；//使用props中的id
}
const back=()={
//router . push(/aa )；//跳转到其他页面
Router.push ({URL:/aa ，查询：{ name: test } })；//带参数跳转
//router.replace(/aa)//
}
OnMounted(()={//页面在初始化时只被请求一次。
//初始化生命周期。一般在初始化参数请求时，获取数据的接口就写在这里。
设a=route . query . a；//获取跳转到页面时传递的参数A
getList(a)；
});
OnActivated(()={//页面每次进入都请求一次，在使用keep-alive时使用，每次进入页面都需要调用一次。
设a=route . query . a；//获取跳转到页面时传递的参数A
getList(a)；
});
/脚本
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。