目录

    1. axios 安装

    使用 npm 安装

    npm install axios --save
    

    全局注册有两种方法:

    1. 绑定到原型上
    import axios from 'axios'
    Vue.prototype.axios = axios
    

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

    this.axios.post(apiUrl).then((res) => {
        //do something
    })
    
    1. 挂载到 windows 对象上

    在 DOM 的任意地方,都能使用 axios 函数。

    import axios from 'axios'
    window.axios = axios;
    
    axios.post(apiUrl).then((res) => {
        //do something
    })
    

    2. axios 配置

    为了配合 Django 的 CSRF 校验,需要在 axios 中进行配置。

    var axiosDefaults = require("axios/lib/defaults");
    axiosDefaults.xsrfCookieName = "csrftoken";
    axiosDefaults.xsrfHeaderName = "X-CSRFToken";
    axiosDefaults.withCredentials = true;
    

    3. axios 拦截器

    拦截器可以对请求做一些公共的处理,比如异常、返回数据的格式。

    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 请求

    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 格式发送数据。

    let params = new URLSearchParams()
    params.append('key1', 'value1')
    params.append('key2', 'value2')
    axios.post(apiUrl, params)
    //数据编码形式:key1=value1&key2=value2
    
    let qs = require('qs')
    let params = {
        key1: 'value1',
        key2: 'value2'
    }
    axios.post(apiUrl, qs.stringify(params));
    //数据编码形式:key1=value1&key2=value2
    
    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

    axios.post(apiUrl, {
            key1: 'value1',
            key2: 'value2'
        }, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
        })
    

    4.4 request payload

    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 请求。

    def is_ajax(self):
        return self.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'
    

    axios 处理办法

    axiosDefaults.headers.common = {
        'X-Requested-With': 'XMLHttpRequest'
    }
    

    6. 参考