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
18
| 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
|
1
2
3
4
5
6
7
8
9
10
11
12
| 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. 参考
