如何为每个切片请求添加其他标头和令牌

Question

我们使用mapbox gl js和自定义磁贴提供程序，磁贴受标记保护。在我们的例子中，每个tile都有自己的令牌，并根据需要通过AJAX请求获取。为了实现这一点，我尝试使用如下所示的tranformRequest选项，但它们都不起作用

Method 1 Returning promise

var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.example.com/styles/streets/style.json',
    center: [53.33, 24.5],
    zoom: 8,
    transformRequest: function(url, resourceType) {
        if(resourceType !== 'Tile') {
            return {
                url: url,
            };
        }

        return axios.get('../api/get-token.php', {
            params: {
                AccessURL: url
            },
            headers: {
                'X-Requested-With': 'XmlHttpRequest'
            }
        }).then(function (response) {
            return {
                url: url,
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                    'token': response.data.token
                }
            }
        });
    }
});

Method 2 async/await

var map = new mapboxgl.Map({
    container: 'map',
    style: 'https://www.example.com/styles/streets/style.json',
    center: [53.33, 24.5],
    zoom: 8,
    transformRequest: async function(url, resourceType) {
        if(resourceType !== 'Tile') {
            return {
                url: url,
            };
        }

        try {
            const response = await axios.get('../api/get-token.php', {
                params: {
                    AccessURL: url
                },
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                }
            });
            return {
                url: url,
                headers: {
                    'X-Requested-With': 'XmlHttpRequest'
                    'token': response.data.token
                }
            };
        } catch (error) {
            return {
                url: url,
            };
        }
    }
});

我怎样才能实现这种情况？ mapbox gl js库中是否存在任何选项或任何解决方法？