1. axios 安装
使用 npm 安装
1
|
npm install axios --save
|
全局注册有两种方法：
绑定到原型上
1
2
|
import axios from 'axios'
Vue.prototype.axios = axios
|
这种方法，每个 Vue 对象都会新增一个 axios 对象。
1
2
3
|
this.axios.post(apiUrl).then((res) => {
//do something
})
|
挂载到 windows 对象上
在 DOM 的任意地方，都能使用 axios 函数。
1
2
|
import axios from 'axios'
window.axios = axios;
|
1
2
3
|
axios.post(apiUrl).then((res) => {
//do something
})
|
2. axios 配置
为了配合 Django 的 CSRF 校验，需要在 axios 中进行配置。
1
2
3
4
|
var axiosDefaults = require("axios/lib/defaults");
axiosDefaults.xsrfCookieName = "csrftoken";
axiosDefaults.xsrfHeaderName = "X-CSRFToken";
axiosDefaults.withCredentials = true;
|
3. axios 拦截器
拦截器可以对请求做一些公共的处理，比如异常、返回数据的格式。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
axios.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response) {
switch (error.response.status) {
case 500:
// do something
break;
case 402:
// do something
break;
}
}
return Promise.reject(error.response.data); // 返回接口返回的错误信息
});
|
4. axios 传参
4.1 get 请求
1
2
3
4
5
6
|
let params = {
key1: 'value1',
key2: 'value2'
}
axios.get(apiUrl, { params })
//数据编码形式： /?key1=value1&key2=value2
|
4.2 POST 请求 x-www-form-urlencoded
axios 默认将 javascript 对象序列化为 JSON 。以 application/x-www-form-urlencoded 格式发送数据。
1
2
3
4
5
|
let params = new URLSearchParams()
params.append('key1', 'value1')
params.append('key2', 'value2')
axios.post(apiUrl, params)
//数据编码形式：key1=value1&key2=value2
|
1
2
3
4
5
6
7
|
let qs = require('qs')
let params = {
key1: 'value1',
key2: 'value2'
}
axios.post(apiUrl, qs.stringify(params));
//数据编码形式：key1=value1&key2=value2
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import qs from 'qs';
let data = {
key1: 'value1',
key2: 'value2'
}
let options = {
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url: apiUrl
};
axios(options);
// 数据编码形式： key1=value1&key2=value2
|
4.3 Form data
1
2
3
4
5
6
7
8
|
axios.post(apiUrl, {
key1: 'value1',
key2: 'value2'
}, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
|
4.4 request payload
1
2
3
4
|
let formData = new FormData()
formData.append('key1', 'value1')
formData.append('key2', 'value2')
axios.post(apiUrl, formData)
|
5. Django 后台不能区分 ajax 和非 ajax
查看源码 django/http/request.py 文件可以看到，Django 是通过请求头部的标识来区分是否为 Ajax 请求。
1
2
|
def is_ajax(self):
return self.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
|
axios 处理办法
1
2
3
|
axiosDefaults.headers.common = {
'X-Requested-With': 'XMLHttpRequest'
}
|
6. 参考
- https://github.com/axios/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format
