如何在angularjs $ http请求中获取请求URL

时间:2022-08-22 17:42:10

I have this request:

我有这个要求:

$http({
  method: 'get',
  url: '/api/items/',
  params: {a: 1, b: 2, c: 3}
}).success(function (response) {
  console.log(response);
}).error(function (err) {
  console.log(err);
});

Is there a way, to fetch the url it used to make the request after the request has been made(in the callback or otherwise)?

有没有办法,在请求发出后(在回调或其他方面)获取用于发出请求的URL?

I would want the output:

我想要输出:

http://www.example.org/api/items?a=1&b=2&c=3

Here the same thing is done with jquery.

这里用jquery做同样的事情。

4 个解决方案

#1


2  

The success handler gets 4 parameters passed into it:

成功处理程序获取传递给它的4个参数:

$http
  .get({ url: '/someUrl', params: { q: 3 } })
  .success(function(data, status, headers, config) {});

The fourth parameter config has the following properties:

第四个参数config具有以下属性:

{
  method: "GET",
  url: {
    url: '/someUrl',
    params: {
      q: 3
    }
  }
}

You can use window.location.origin to get the base url and build a simple function to concat it all together.

您可以使用window.location.origin获取基本URL并构建一个简单的函数来将它们连接在一起。

This function should yield the expected response:

此函数应产生预期的响应:

var baseUrl = window.location.origin;
var query = [];
Object.keys(config.url.params || {}).forEach(function (key) {
  var val = config.url.params[key];
  query.push([key, val].join('=')); // maybe url encode
});
var queryStr = query.join('&');
var fullPath = baseUrl + config.url.url + '?' + queryStr;

Unfortunately, this function will only work as long as the parameters are passed in the format described above. If you pass them in a different format, you'll have to modify this function a bit. You can use this as a playground.

不幸的是,只有参数以上述格式传递时,此功能才有效。如果以不同的格式传递它们,则必须稍微修改此函数。你可以把它用作游乐场。

Afaik, there is no simpler way. At least a feature request exists.

Afaik,没有更简单的方法。至少存在功能请求。

See the docs of $http for reference

请参阅$ http的文档以供参考

#2


0  

This config parameter of the callback has the url as a property:

回调的此配置参数将url作为属性:

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    console.log(config.url);
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Based on: https://docs.angularjs.org/api/ng/service/$http

基于:https://docs.angularjs.org/api/ng/service/$http

#3


0  

You can use http request Interceptor. Configure the Interceptor in config function using $httpProvider Whrein for request Interceptor you can able to see the URL and params that you passed with URL prior to making the request

您可以使用http请求拦截器。在配置函数中配置拦截器使用$ httpProvider Whrein for request Interceptor你可以在发出请求之前看到你通过URL传递的URL和参数

#4


0  

try just looking at the XHR Request urls in your browser dev tools

尝试在浏览器开发工具中查看XHR请求网址

#1


2  

The success handler gets 4 parameters passed into it:

成功处理程序获取传递给它的4个参数:

$http
  .get({ url: '/someUrl', params: { q: 3 } })
  .success(function(data, status, headers, config) {});

The fourth parameter config has the following properties:

第四个参数config具有以下属性:

{
  method: "GET",
  url: {
    url: '/someUrl',
    params: {
      q: 3
    }
  }
}

You can use window.location.origin to get the base url and build a simple function to concat it all together.

您可以使用window.location.origin获取基本URL并构建一个简单的函数来将它们连接在一起。

This function should yield the expected response:

此函数应产生预期的响应:

var baseUrl = window.location.origin;
var query = [];
Object.keys(config.url.params || {}).forEach(function (key) {
  var val = config.url.params[key];
  query.push([key, val].join('=')); // maybe url encode
});
var queryStr = query.join('&');
var fullPath = baseUrl + config.url.url + '?' + queryStr;

Unfortunately, this function will only work as long as the parameters are passed in the format described above. If you pass them in a different format, you'll have to modify this function a bit. You can use this as a playground.

不幸的是,只有参数以上述格式传递时,此功能才有效。如果以不同的格式传递它们,则必须稍微修改此函数。你可以把它用作游乐场。

Afaik, there is no simpler way. At least a feature request exists.

Afaik,没有更简单的方法。至少存在功能请求。

See the docs of $http for reference

请参阅$ http的文档以供参考

#2


0  

This config parameter of the callback has the url as a property:

回调的此配置参数将url作为属性:

// Simple GET request example :
$http.get('/someUrl').
  success(function(data, status, headers, config) {
    console.log(config.url);
  }).
  error(function(data, status, headers, config) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

Based on: https://docs.angularjs.org/api/ng/service/$http

基于:https://docs.angularjs.org/api/ng/service/$http

#3


0  

You can use http request Interceptor. Configure the Interceptor in config function using $httpProvider Whrein for request Interceptor you can able to see the URL and params that you passed with URL prior to making the request

您可以使用http请求拦截器。在配置函数中配置拦截器使用$ httpProvider Whrein for request Interceptor你可以在发出请求之前看到你通过URL传递的URL和参数

#4


0  

try just looking at the XHR Request urls in your browser dev tools

尝试在浏览器开发工具中查看XHR请求网址