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;
}