一、如何发送get/post请求?
Axios安装
CDN方式:https://unpkg.com/axios/dist/axios.min.jshttps://unpkg.com/axios/dist/axios.min.js NPM方式:
npm install axios
基本用法:
//通过向axios创建相关配置创建请求
axios({
//如果不写请求方式,则默认方式为get
method:"post",
//请求路径
url:"/address/user",
//请求参数 !!只有put post 才使用data配置
data:{
name:"参数",
password:"参数",
}
}).then(res=>console.log(res.data));
// res 是整体的的响应对象,一共有6个属性 其中的data才是需要的数据
get请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 上面的请求也可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
post请求
let obj = {
firstName: 'Fred',
lastName: 'Flintstone'
}
axios.post('/user', obj)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
#执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
//一般使用不多
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
anync+await调用axios:
async handler(newVal){
let obj = await axios.get('http://127.0.0.1:8080/register?name='+newVal);
console.log(obj.data);
}
二、前后端交互的数据格式问题?
请求的格式:application/(x-www-form-urlencoded / json / form-data / text-xml / plian)
axios默认发送 application/json类型的数据 部分后端无法直接接收
需要处理 ① qs方式(推荐)
qs.stringify(data)
把数据转换成application/x-www-form-urlencoded格式。
② URLSearchParam()
const params = new URLSearchParams();
params.append("act", "login");
params.append("user", "张三");
params.append("pass", "123456");