Please enable Javascript to view the contents

1. axios 安装

使用 npm 安装

1

npm install axios --save

全局注册有两种方法：

  1. 绑定到原型上
1
2

import axios from "axios";
Vue.prototype.axios = axios;

这种方法，每个 Vue 对象都会新增一个 axios 对象。

1
2
3

this.axios.post(apiUrl).then((res) => {
  //do something
});
  1. 挂载到 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

4.3 Form data

 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. 参考

微信公众号

作者

微信公众号