由于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})
转自:https://blog.csdn.net/qq_31837621/article/details/80688854