Vue数据通讯(请求数据)

alice--小文子 2022-09-23 09:32:13 阅读数:369

vue数据通讯数据通数据通讯

1 用库:axios

(1)引入:import Axioa from "axios";

(2)在vue实例中:

get请求

async created (){
        let {data} = await Axioa.get("./data/user.json");//({data}这样写是因为请求出来包含很多内容,实际只需要data)
        this.name = data.name;
}

post请求 

async created (){
await Axios({
url:"./data/sum.php",
method:"post",
data:{
a:1,
b:2
},
transformRequest:[//变换强求(Axios默认请求方式为json形式,在form表单提交的时候一般需要转换成a=1&b=2形式)
/*function (data){//传统方法不推荐
let arr = [];
for(let item in data){
//arr.push(item +"="+data.item);
arr.push(`${item} = ${data.item}`);
}
return arr.join("&");
}*/
function (data){//此时需要引入node系统模块(import {stringify} from "querystring")
return stringify(data);
}
]
})
}
可以将单次请求的transformRequest放入公共模块中,代码如下:
const axios = Axios.creat({transformRequest:[
function (data){//之后再请求数据不用再写这部分
return stringify(data);
}
]})

2 用原生:fetch

get请求:

async created (){
        let res = await fetch("./data/user.json");//({data}这样写是因为请求出来包含很多内容,实际只需要data)
let data = res.json()
        this.name = data.name;
}

post请求:

async created (){
let formdata = new FormData();
formdata.append("a",12);
formdata.append("b",9);
let res = await fetch("data/sum.php",{
method:"post",
body:formdata
});
let result = await res.json();
this.age = result;
}

版权声明:本文为[alice--小文子]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/alice9999999/article/details/119422657