Javascript 调整XHR收割台

Javascript 调整XHR收割台,javascript,typescript,xmlhttprequest,Javascript,Typescript,Xmlhttprequest,我想在TypeScript中创建一个XHR。我要访问的API具有以下url: https://my-url/user/login 在传递数据时应该是这样的: https://my-url/user/login?username=username&password=password&api_key=key 我的问题是,我用https://my-url/user/login-url,当传递数据时,我收到了一个404(我猜是因为他是这样形成的https://my-url/user/

我想在TypeScript中创建一个XHR。我要访问的API具有以下url:

https://my-url/user/login
在传递数据时应该是这样的:

https://my-url/user/login?username=username&password=password&api_key=key
我的问题是,我用
https://my-url/user/login
-url,当传递数据时,我收到了一个404(我猜是因为他是这样形成的
https://my-url/user/login/username=username...
)。我的解决方法:使用插入的元素将标头直接传递到xor中:

        let xhr = new XMLHttpRequest();
        xhr.open("GET", "https://my-url/user/login?username=" + username 
            + "&password=" + password + "&api_key=key", true);
        xhr.setRequestHeader("Accept", "application/json");
        // xhr.setRequestHeader("api_key", "key");
        //xhr.setRequestHeader("username", username);
        // xhr.setRequestHeader("password", password);
        xhr.onreadystatechange = function() {
            console.log("state changed - new state: " + xhr.readyState + " and Status: " + xhr.status);
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log("login Request successful: " + xhr.responseText);
                    alert("Logged in!");
                } else {
                    alert("Login failed!");
                    console.log("Error: " + xhr.status + " Message: " + xhr.statusText);
                }
            }
        };
        xhr.send();

但是我不想使用这种方式,因为必须有一种不同的方式来执行这个请求——有人能给我一个如何解决这个问题的提示吗

首先,不要在请求中放入普通变量。使用
encodeURIComponent
(参考:)

可以使用此函数正确设置GET参数的格式

function formatParams( params ){
      return "?" + Object.keys(params).map((key) => {
          return `${key}=${encodeURIComponent(params[key])}`
      }).join("&")
}
然后你可以这样使用它:

let xhr = new XMLHttpRequest();
xhr.open("GET", `https://my-url/user/login${formatParams({username, password, api_key: key})}`, true);
xhr.setRequestHeader("Accept", "application/json");

谢谢你:)-我到底需要通过什么程序才能成为params?我尝试了formatParams([用户名、密码、api_密钥]),他似乎正在将密钥设置为1、2、3…-所以他返回了?0=用户名&1=密码&2=密钥编辑:发现了,nvm,我很笨:DYou正在使用数组而不是对象:)