axios设置前缀

原创

mob649e816a3664 2023-12-27 05:45:04 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e816a3664的原创作品，请联系作者获取转载授权，否则将追究法律责任

axios设置前缀

在前端开发中，我们经常需要与后端进行数据交互，而HTTP请求是最常见的一种方式。在JavaScript中，我们可以使用Axios库来发送HTTP请求。Axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它具有简洁的API，强大的功能和广泛的浏览器兼容性。

有时候，我们的后端接口可能有一个共同的前缀，为了避免在每个请求中都重复写前缀，我们可以使用Axios的全局配置来设置请求的默认前缀。这样，我们只需要在每个请求中指定相对路径即可。

设置前缀的方法

Axios提供了一个defaults.baseURL属性，用于设置全局的请求前缀。我们可以在项目初始化的时候设置该属性：

import axios from 'axios';

axios.defaults.baseURL = '

上述代码将会设置全局的请求前缀为`

示例代码

下面是一个简单的示例代码，用于向后端发送一个GET请求并获取响应的数据：

import axios from 'axios';

axios.defaults.baseURL = '

axios.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中，我们首先通过axios.defaults.baseURL设置了请求前缀。然后，我们使用axios.get方法发送一个GET请求，指定了相对路径/users。Axios会自动将请求前缀和相对路径拼接起来，并发送请求。最后，我们通过.then方法处理成功的响应，获取到了响应数据。

表格

下面是一个简单的表格，展示了Axios的全局配置属性和其含义：

属性	含义
`baseURL`	请求的基础URL前缀
`timeout`	请求超时时间（毫秒）
`headers`	请求头
`withCredentials`	是否携带跨域凭证
`xsrfCookieName`	CSRF令牌的cookie名称
`xsrfHeaderName`	CSRF令牌的请求头名称

关系图

下面是一个使用Mermaid语法表示的关系图（ER图），展示了Axios的全局配置属性之间的关系：

erDiagram
  axios_defaults ||--|| baseURL : 设置请求前缀
  axios_defaults ||--|{ headers : 设置请求头
  axios_defaults ||--|{ timeout : 设置超时时间
  axios_defaults ||--|| withCredentials : 设置是否携带跨域凭证
  axios_defaults ||--|| xsrfCookieName : 设置CSRF令牌的cookie名称
  axios_defaults ||--|| xsrfHeaderName : 设置CSRF令牌的请求头名称