1. 程式人生 > 實用技巧 >axios的各種post提交方式總結

axios的各種post提交方式總結

先建立一個axios的通用物件

const request = axios.create({
    timeout: 10000
});

第一種提交form表單資料,後臺正常用物件接收

let fm = new FormData();
fm.append("id",1);
fm.append("name","測試");
//提交資料
request({
    url:'/api/xxx',
    method:'post',
    data:fm//注意這裡要使用data,如果需要在url上面拼接引數則需要使用param
});

第二種向restful介面提交資料,後臺使用@RequestBody接收引數

let person = {
    id:1,
    name:'張三'
};
request({
    url:'/api/yyy',
    method:'post',
    data:person//注意這裡不需要轉成json字串,axios會自動識別該資料是form表單資料還是物件資料
});

第三種向普通介面傳送js物件資料,前臺需要轉換一下,這些資料會當作表單資料提交(類似於第一種,但是這裡不傳formdata物件)

此種情況需要引入一個qs包用於拼接資料

import qs from 'qs';//如果沒有安裝qs包請使用 `npm install qs -D`進行安裝
let person = {
    id:1,
    name:'張三'
};
request({
    url:'/api/yyy',
    method:'post',
    data:qs.stringify(person)//注意這裡不能使用JSON.stringify,因為會將js物件轉換成了json字串。而qs.stringify類似於引數拼接a=xxx&b=xxx
});