![cover](https://img-blog.csdnimg.cn/6e3667e956c642be8a4d38da2701ed14.png)
Axios GET POST请求数据完整
Axios GET POST请求数据完整
·
vue-resource — 官方提供的vue的一个插件;
axios ---- 第三方插件,就是封装好的一个模块化的东西;
使用方法区别于vue-resource, 和以前封装的storage.js相似;
Vue中可以用,node.js、react中也可以用;
fetch-jsonp—
Github官网(https://github.com)搜索:”axios”.
在这里插入图片描述
=下面是
fetch-jsonp=属于第三方插件,
和AXios使用方法一致
建议使用官方提供的:vue-resource ;
Vue-resource 不需要哪里使用哪里引入,只需要在main.js中全局引入就可以使用;
main.js下:
<script>
Import VueResource from ‘../xxx/vue-resource’
Vue.use(VueResource );
</script>
使用Ajax请求数据,原生js封装也是ok的。
Axios [GET、POST请求数据]
一、Axios GET请求数据:
1、安装Axios: npm install axios --save
2、当前页面引入及使用Axios;
<template>
<div class="getparams">
<button @click="getMsg()">Axios请求数据</button>
<ul>
<li v-for="item in list">
{{item.aid}}--{{item.catid}}--{{item.username}}--{{item.title}}--{{item.dateline}}
</li>
</ul>
</div>
</template>
<script>
//当前页面引入Axios
import Axios from 'axios'
export default {
data(){
return{
list:[]
}
},
mounted(){//页面刷新时会触发
console.log("===获取地址栏中的请求参数====");
},
methods:{
getMsg(){
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1
Axios.get(api).then((response)=>{
//vue-resource 使用 response.body.xxx
//axios 使用 response.data.xxx
//具体结果更具响应结果字符串决定
console.log("===response.data.result==="+response.data.result);
console.log("===response==="+JSON.stringify(response));
this.list = response.data.result;
},(error)=>{
console.log("===error==="+error);
})
}
}
}
</script>
<style>
/**
.getparams{
color:red;
}
*/
</style>
响应数据格式:
{
"data": {
"result": [
{
"aid": "507",
"catid": "20",
"username": "admin",
"title": "Nestjs仿小米商城企业级Nodejs项目实战视频教程",
"pic": "",
"dateline": "1610684312"
},
{
"aid": "506",
"catid": "20",
"username": "admin",
"title": "Ionic5+Vue3+Capacitor打造跨平台可以安装的App",
"pic": "",
"dateline": "1610684259"
}
]
},
"status": 200,
"statusText": "OK",
"headers": {
"content-type": "text/html; charset=utf-8"
},
"config": {
"url": "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1",
"method": "get",
"headers": {
"Accept": "application/json, text/plain, */*"
},
"transformRequest": [
null
],
"transformResponse": [
null
],
"timeout": 0,
"xsrfCookieName": "XSRF-TOKEN",
"xsrfHeaderName": "X-XSRF-TOKEN",
"maxContentLength": -1,
"maxBodyLength": -1
},
"request": {}
}
二、Axios POST请求数据:
<template>
<div class="getparams">
<button @click="getMsg()">POST请求数据</button>
<ul>
<li v-for="(item,key) in list">
{{item.id}}--{{item.content.name}}--{{item.content.type}}--{{item.content.layout}}
</li>
</ul>
</div>
</template>
<script>
//当前页面引入Axios
import Axios from 'axios'
export default {
data(){
return{
list:[]
}
},
mounted(){//页面刷新时会触发
console.log("===获取地址栏中的请求参数====");
},
methods:{
getMsg(){
var api = 'http://localhost:1000/getXfProgramListByUsername'
//前端入参为json对象,后端入参自动转换为String类型;
var param = {"username":"admin"};
Axios.post(api,param,{emulateJSON:true}).then((response)=>{
//后端返回String类型,前端接收到的为json对象
console.log("==response===="+JSON.stringify(response));
if(response.data.status=='SUCCESS'){
this.list = response.data.data;
this.$message("请求数据成功!");
}else{
this.$message("请求数据失败!");
}
},(error)=>{
this.$message("请求出错"+error);
})
}
}
}
</script>
<style>
/**
.getparams{
color:red;
}
*/
</style>
更多推荐
所有评论(0)