javascript - jQuery Ajax : Variable as Header key

Question

所以目前我正在使用 emberjs，我尝试使用变量以这种方式设置请求的 header :

 Ember.$.ajax({
            type: "GET",
            url: this.requestEndpoint,
            headers: {`${headerName}`: headerValue}
        })

但问题是，在 headers: {`${headerName}`: headerValue} 中，` 是一个意外的标记。您有解决该问题的想法吗？

编辑:只是为了确保 headerName 和 headerValue 是变量。

var name = headerName;
        var val = headerValue;
        var obj = {
           headerName:name,
           headerValue:val
        };
        Ember.$.ajax({
            type: "GET",
            url: this.requestEndpoint,
            headers: {obj.headerName: obj.headerValue}
        })

得到错误:

Build error

client/controllers/workouts.js (in /opt/client/tmp/babel-input_base_path-LBKF5l2Q.tmp/0)

client/controllers/workouts.js: Unexpected token (19:22)
SyntaxError: client/controllers/workouts.js: Unexpected token (19:22)
  17 |          type: "GET",
  18 |          url: this.requestEndpoint,
> 19 |          headers: {obj.headerName: obj.headerValue}
     |                       ^
  20 |      }).success(function(data) {
  21 |          console.log(JSON.stringify(data));
  22 |          return data;
    at Parser.pp.raise (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.parseObj (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:596:12)
    at Parser.pp.parseExprAtom (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:392:19)
    at Parser.pp.parseExprSubscripts (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:236:19)
    at Parser.pp.parseMaybeUnary (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:217:19)
    at Parser.pp.parseExprOps (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:163:19)
    at Parser.pp.parseMaybeConditional (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:145:19)
    at Parser.pp.parseMaybeAssign (/opt/client/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:112:19)

Answer 1

这里`

`${headerName}`  

反引号用于ES6标准中的字符串插值，所以为此你必须使用像babel这样的js编译器，它将ES6代码编译成今天在浏览器中运行的ES5，很快ES6就会可用在浏览器中使用，但到目前为止我们必须编译才能运行它。

根据您的评论，我建议您可以将其存储在一个对象中:

    var name = headerName;
    var val = headerValue;
    var obj = {};

    obj[name] = val; // outputs {Auth:Authstring}

然后你可以在你的ajax中引用它:

 Ember.$.ajax({
        type: "GET",
        url: this.requestEndpoint,
        headers: {obj.headerName: obj.headerValue} // <---use it here then
    })

var headerName = "Ember";
var headerValue = "JS Framework";
var obj = {
  headerName: headerName, // you have to store the string value in a var as above.
  headerValue: headerValue
};

document.querySelector('pre').innerHTML = JSON.stringify(obj);

<pre></pre>