axios常见传参方式

2018-09-18 06:37:35来源：博客园阅读 ()

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})

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有