axios常见传参方式get/post/put/patch/delete

来源

由于axios中包含es6的语法，需要支持ES6 Promise实现。 如果您的环境不支持ES6 Promise，您可以使用polyfill。

（可以使用 import "babel-polyfill" ）

axios的官方API  地址

 

以下是axios官方api中描述不完整的地方：

开发过程中，经常需要全局设置，许多前端开发时容易忽略请求头的配置，常用的请求头有2种：

axios.defaults.timeout = 15000; //超时响应

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 配置请求头（推荐）

// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'; // 配置请求头

axios.defaults.baseURL = $core.use('http'); //确认协议和地址

axios.defaults.withCredentials = true; // axios 默认不发送cookie，需要全局设置true发送cookie

 在这里我推荐全局请求头headers中Content-Type使用：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

为什么？我在下面解释

1:get请求

axios中常见的get/delete请求，也称作query请求：

一般发送请求是这么写（不推荐）：

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请求

传参方式大致用的有3种

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

第二种情况：使用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})