【Vue】教程:五、vuex、axios请求接口的几种方式

请求头种类

常用的请求头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);
});