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

版权声明:Copyright 2000-2018 李明达 All rights Reserved. https://blog.csdn.net/qq_31837621/article/details/80688854

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

 

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页