1:get請求 一般發送請求是這麼寫 但是為了方便全局統一調用封裝的axios 2.post/put/patch請求 (1) 傳參格式為 formData (全局請求頭:'Content-Type'= 'application/x-www-form-urlencoded') (request的Hea ...
1:get請求
一般發送請求是這麼寫
axios.get('/user?id=12345&name=user')
.then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
但是為了方便全局統一調用封裝的axios
axios.get('/user', { //params參數必寫 , 如果沒有參數傳{}也可以
params: {
id: 12345,
name: user
}
})
.then(function (res) {
console.log(res);
})
.catch(function (err) {
console.log(err);
});
2.post/put/patch請求
(1) 傳參格式為 formData
(全局請求頭:'Content-Type'= 'application/x-www-form-urlencoded')
(request的Header:'Content-Type'= 'multipart/form-data')
var formData=new FormData();
formData.append('user',123456);
formData.append('pass',12345678);
axios.post("/notice",formData)
.then((res) => {return res})
.catch((err) => {return err})
(2) 傳參格式為 query 形式
(全局請求頭:'Content-Type'= 'application/x-www-form-urlencoded')
(request的Header:'Content-Type'= 'application/x-www-form-urlencoded')
第一種情況:使用$qs.stringify
import Qs from 'qs' //引入方式
Vue.prototype.$qs = Qs //全局載入
this.$qs.stringify(data); //使用方式
this.$qs.parse(data); //使用方式
var readyData=this.$qs.stringify({
id:1234,
name:user
});
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})
更多qs功能參考:https://www.npmjs.com/package/qs
第二種情況:使用URLSearchParams
在瀏覽器中,您可以使用URLSearchParams API,如下所示:
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
註意:所有瀏覽器都不支持URLSearchParams,但是有一個polyfill可用(確保polyfill全局環境)。
(3) 傳參格式為 raw (JSON格式)
第一種情況: axios將JavaScript對象序列化為JSON
(全局請求頭:'Content-Type'= 'application/x-www-form-urlencoded')
(request的Header:'Content-Type'= 'application/json;charset=UTF-8')
var readyData={
id:1234,
name:user
};
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})
第二種情況:
(全局請求頭:‘Content-Type'= 'application/json;charset=UTF-8')
(request的Header:‘Content-Type'= 'application/json;charset=UTF-8')
var readyData=JSON.stringify({
id:1234,
name:user
});
axios.post("/notice",readyData)
.then((res) => {return res})
.catch((err) => {return err})