【Vue】教程:五、vuex、axios请求接口的几种方式
2019-12-16 本文已影响0人
smartdream
请求头种类
常用的请求头Content-Type
分为以下几种
- application/json(不特别指定时
axios
的默认值) - multipart/form-data
- application/x-www-form-urlencoded
1.先在store中定义如下请求接口方法,然后在.vue中使用
post
形式
async registerUserInfo({ commit }, params) {
let res = await axios.post(`${__SHJ__}/user/userInfo/add`, params);
return res.data;
},
get
形式
async registerUserInfo({ commit }, params) {
let res = await axios.get(`${__SHJ__}/user/userInfo/add`, {params:params});
return res.data;
},
这里也可以添加config
参数
// application/json默认格式,无需添加请求头
const configFormData = {'headers': {'Content-Type': 'multipart/form-data'}};// 注意传参数中有 文件|图片 时参数请求头无需填写,必须在页面中单独声明一个新的formdata对象,将参数放入formdata对象中再传递
const configFormURL = {'headers': {'Content-Type': 'application/x-www-form-urlencodeed'}};
-const configFormText = {'headers': {'Content-Type': 'text/xml'}};
async registerUserInfo({ commit }, params) {
let res = await axios.post(`${__SHJ__}/user/userInfo/add`, params , configFormData );
return res.data;
},
1.1.content-type: application/json;charset=UTF-8,参数以payload
形式传递
在.vue
页面中
let params = {
name: this.ruleForm.name,
password: this.ruleForm.password,
};
this.registerUserInfo(params).then(res => {
console.log(res);
});
1.2.Content-Type: multipart/form-data,参数以form-data
形式传递
在.vue
页面中
let formData = new FormData();
formData.append("name", this.ruleForm.name);
formData.append("password", this.ruleForm.password);
this.registerUserInfo(formData).then(res => {
console.log(res);
});
1.3.Content-Type: application/x-www-form-urlencoded;charset=UTF-8,参数以form-data
形式传递
在.vue
页面中
let urlSearchParams= new URLSearchParams();
urlSearchParams.append("name", this.ruleForm.name);
urlSearchParams.append("password", this.ruleForm.password);
this.registerUserInfo(urlSearchParams).then(res => {
console.log(res);
});
2.直接在.vue中使用axios请求
axios({
method: 'post',
headers: {// 这里可以自定义想要的请求头
'Content-Type': 'multipart/form-data'
},
url:`${__SHJ__}/user/userInfo/add`,
data: params
}).then(res => {
console.log(res);
});