使用AXIOS进行API请求保持干燥

任何与后端服务器通信的 Web 应用程序都离不开 HTTP 请求。前端需要数据，因此它通过网络 HTTP 请求（或通常所说的 Ajax）请求数据，服务器返回答案。如今几乎每个网站都以某种方式执行此操作。

对于大型网站，我们可以预期会看到更多这样的请求。更多数据、更多 API 和更多特殊情况。随着网站规模的增长，保持组织性非常重要。一个经典的概念是 DRY（Don't Repeat Yourself，不要重复自己），它指的是抽象代码以防止重复的过程。这是理想的，因为它通常允许我们编写一次代码，在多个地方使用它，并在单个位置进行更新，而不是在每个实例中进行更新。

我们还可以使用库来帮助我们。对于 Ajax，axios 是一个流行的选择。您可能已经熟悉它，甚至在开发过程中将其用于独立的 POST 和 GET 请求。

安装和基础知识

可以使用 npm（或 yarn）安装它：

npm install axios

使用 Axios 的独立 POST 请求如下所示：

axios.post('https://axios-app.firebaseio.com/users.json', formData)
  .then(res => console.log(res))
  .catch(error => console.log(error))

原生 JavaScript 也有多种方法可以执行 JavaScript 代码。值得注意的是，fetch()。那么为什么还要使用库呢？首先，fetch 的错误处理非常奇怪。从一开始，使用 axios 就会轻松很多。如果您想查看比较，我们有一篇文章同时介绍了这两种方法，还有一篇文章讨论了这种抽象方法的价值。

另一个使用 axios 的原因？它为我们提供了更多 DRY 的机会，所以让我们来看看。

全局配置

我们可以设置一个全局配置（例如，在我们的 main.js 文件中），使用标准配置处理所有应用程序请求，该配置通过 axios 附带的默认对象设置。

此对象包含：

• baseURL:用作所有请求前缀的相对 URL，每个请求都可以附加 URL
• headers:可以根据请求设置的自定义标头
• timeout:请求中止的时间点，通常以毫秒为单位。默认值为 0，表示不适用。
• withCredentials:指示是否应使用凭据进行跨站点访问控制请求。默认为 false。
• responseType:指示服务器将返回的数据类型，选项包括 json（默认）、arraybuffer、document、text 和 stream。
• responseEncoding:指示用于解码响应的编码。默认值为 utf8。
• xsrfCookieName:用作 XSRF 令牌值的 Cookie 的名称，默认值为 XSRF-TOKEN。
• xsrfHeaderName:承载 XSRF 令牌值的 HTTP 标头的名称。默认值为 X-XSRF-TOKEN。
• maxContentLength:定义允许的 HTTP 响应内容的最大大小（以字节为单位）
• maxBodyLength:定义允许的 HTTP 请求内容的最大大小（以字节为单位）

大多数情况下，您只会使用 baseURL、header 和可能还有 timeout。其余的不太常用，因为它们有智能默认值，但如果您需要修复请求，了解它们的存在是很好的。

这就是 DRY 的作用。对于每个请求，我们不必重复 API 的 baseURL 或重复我们可能在每个请求中都需要的重要标头。

这是一个示例，其中我们的 API 有一个基址，但它也有多个不同的端点。首先，我们设置一些默认值：

// main.js
import axios from 'axios';

axios.defaults.baseURL = 'https://axios-app.firebaseio.com' // URL 前缀
axios.defaults.headers.get['Accept'] = 'application/json'  // 所有 GET 请求的默认标头
axios.defaults.headers.post['Accept'] = 'application/json' // 所有 POST 请求的默认标头

// 然后，在一个组件中，我们可以更简洁地使用 axios，不需要设置这些标头，但仍然有机会自定义最终的 URL 端点：

// form.js 组件
import axios from 'axios';

export default {
  methods: {
    onSubmit() {
      // URL 现在是 https://axios-app.firebaseio.com/users.json
      axios.post('/users.json', formData)
        .then(res => console.log(res))
        .catch(error => console.log(error))
    }
  }
}

注意：此示例在 Vue 中，但此概念扩展到任何 JavaScript 环境。

自定义实例

设置“自定义实例”类似于全局配置，但作用域限定为指定的组件。因此，它仍然是一种 DRY 技术，但具有层次结构。

我们将在一个新文件中设置我们的自定义实例（让我们将其命名为 authAxios.js），并将其导入到“关注”组件中。

// authAxios.js
import axios from 'axios'

const customInstance = axios.create({
  baseURL: 'https://axios-app.firebaseio.com'
})
customInstance.defaults.headers.post['Accept'] = 'application/json'

// 或像这样...
const customInstance = axios.create({
  baseURL: 'https://axios-app.firebaseio.com',
  headers: {'Accept': 'application/json'}
})

然后我们将此文件导入表单组件：

// form.js 组件

// 从我们的自定义实例导入
import axios from './authAxios'

export default {
  methods: {
    onSubmit() {
      axios.post('/users.json', formData)
        .then(res => console.log(res))
        .catch(error => console.log(error))
    }
  }
}

拦截器

拦截器可以处理全局配置或自定义实例可能过于通用的情况，这意味着如果您在其对象中设置了标头，则它将应用于受影响组件中每个请求的标头。拦截器能够动态更改任何对象属性。例如，我们可以根据我们在拦截器中选择的任何条件发送不同的标头（即使我们在对象中设置了标头）。

拦截器可以在 main.js 文件或自定义实例文件中。请求在发送后被拦截，并允许我们更改响应的处理方式。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前执行某些操作，例如，我们只为具有特定 baseURL 的请求插入超时
  if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
    config.timeout = 4000
  } else {
    return config
  }
  console.log(config)
  return config;
}, function (error) {
  // 对请求错误执行某些操作
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据执行某些操作，例如 console.log、更改标头，或者像我们在这里所做的那样添加条件行为，根据响应状态更改路由或弹出警报框
  if (response.status === 200 || response.status === 201) {
    router.replace('homepage')
  } else {
    alert('异常行为')
  }
  console.log(response)
  return response;
}, function (error) {
  // 对响应错误执行某些操作
  return Promise.reject(error);
});

拦截器顾名思义，拦截请求和响应，以根据提供的任何条件采取不同的行为。例如，在上面的请求拦截器中，我们只在请求具有特定 baseURL 时插入条件超时。对于响应，我们可以拦截它并修改我们返回的内容，例如更改路由或显示警报框，具体取决于状态代码。我们甚至可以根据不同的错误代码提供多个条件。

随着项目规模的扩大，您开始拥有许多路由和嵌套路由，所有这些路由都基于不同的触发器与服务器通信，拦截器将非常有用。除了我在上面设置的条件之外，还有许多其他情况可能需要使用拦截器，具体取决于您的项目。

有趣的是，我们可以弹出拦截器以阻止其产生任何影响。我们必须将拦截器分配给一个变量，并使用恰当命名的弹出方法将其弹出。

const reqInterceptor = axios.interceptors.request.use(function (config) {
  // 在发送请求之前执行某些操作，例如，我们只为具有特定 baseURL 的请求插入超时
  if (config.baseURL === 'https://axios-app.firebaseio.com/users.json') {
    config.timeout = 4000
  } else {
    return config
  }
  console.log(config)
  return config;
}, function (error) {
  // 对请求错误执行某些操作
  return Promise.reject(error);
});

// 添加响应拦截器
const resInterceptor = axios.interceptors.response.use(function (response) {
  // 对响应数据执行某些操作，例如 console.log、更改标头，或者像我们在这里所做的那样添加条件行为，根据响应状态更改路由或弹出警报框
  if (response.status === 200 || response.status === 201) {
    router.replace('homepage')
  } else {
    alert('异常行为')
  }
  console.log(response)
  return response;
}, function (error) {
  // 对响应错误执行某些操作
  return Promise.reject(error);
});

axios.interceptors.request.eject(reqInterceptor);
axios.interceptors.request.eject(resInterceptor);

虽然不太常用，但可以将拦截器放入条件语句中，或者根据某些事件将其删除。

希望这能让你很好地了解 axios 的工作方式，以及如何在应用程序中使用它来保持 API 请求的 DRY 原则。虽然我们通过列出常见用例和配置来触及表面，但 axios 还有许多其他优点，您可以在文档中探索，包括取消请求和防止跨站点请求伪造的能力，以及其他令人惊叹的可能性。

以上是使用AXIOS进行API请求保持干燥的详细内容。更多信息请关注PHP中文网其他相关文章！