axios常见传参方式

https://www.cnblogs.com/zhaojunhao/p/9622004.html

1:get请求

一般发送请求是这么写

1

2

3

4

5

6

axios.get('/user?id=12345&name=user')

.then(function (res) {

    console.log(res);

}).catch(function (err) {

    console.log(err);

});

但是为了方便全局统一调用封装的axios

1

2

3

4

5

6

7

8

9

10

11

12

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

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

9

10

11

12

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,如下所示:

1

2

3

4

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

1

2

3

4

5

6

7

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

1

2

3

4

5

6

7

var readyData=JSON.stringify({

    id:1234,

    name:user

});

axios.post("/notice",readyData)

     .then((res) => {return res})

     .catch((err) => {return err}

发布了52 篇原创文章 · 获赞 24 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_42312074/article/details/104005273
今日推荐