掌握axios：一款简单易用的前端HTTP请求库

一、安装axios

1. 使用npm安装axios

npm install axios

通过 npm 安装 axios 的最佳方式是直接在项目中使用它。

2. 使用CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

可以通过 CDN 使用 axios。请使用最新版本，并将其附加到<head>您的HTML 的标签中。

二、使用axios发送HTTP请求

1. 发送GET请求

axios.get('https://api.example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })

使用get函数从API获取数据，并在控制台中打印响应。

2. 发送POST请求

axios.post('https://api.example.com/', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

使用post函数将数据发送到指定API，并在控制台中打印响应。

3. 配置请求

// 设置请求头
const config = {
    headers:{
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + token
    }
}

axios.post('https://api.example.com/', { data }, config)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

可以在发出请求之前通过配置对象传递任意数量的选项来自定义请求。上面的示例设置了Content-Type和Authorization头部。

4. 取消请求

import axios, { CancelToken } from 'axios';

const source = CancelToken.source();

axios.get('https://api.example.com/', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

当请求已经被发送时，我们可以使用取消令牌来中止请求。以上例子展示了如何创建取消令牌，以及在发送请求时如何将其添加到配置中。

三、axios的拦截器功能

1. 请求拦截器

axios.interceptors.request.use(function (config) {
  // 处理请求数据
  return config;
}, function (error) {
  // 处理请求错误
  return Promise.reject(error);
});

axios.get('https://api.example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

我们可以使用请求拦截器在发送请求之前对请求进行一些处理，例如添加请求头。在上面的例子中，我们向配置对象添加了Auth处理程序。

2. 响应拦截器

axios.interceptors.response.use(function (response) {
  // 处理响应数据
  return response;
}, function (error) {
  // 处理响应错误
  return Promise.reject(error);
});

axios.get('https://api.example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

我们也可以使用响应拦截器对响应进行处理，例如对错误进行处理或者在响应中添加额外的内容。

四、使用axios的附加功能

1. 并发请求

axios.all([
    axios.get('https://api.example.com/1'),
    axios.get('https://api.example.com/2')
  ])
  .then(axios.spread(function (response1, response2) {
    // handle success
  }));

当我们需要一次性发送多个请求时，可以使用axios.all()和axios.spread()来处理响应。

2. CSRF保护

// 设置默认的请求头部
axios.defaults.xsrfHeaderName = 'X-CSRF-Token';

axios.get('https://api.example.com/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

在使用axios时，为保护我们的应用程序免受CSRF攻击，我们可以在axios实例中设置默认请求头部。

3. 自定义axios实例

// 创建自定义axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

我们可以使用axios.create()方法创建自定义axios实例，并进行一些设置，例如超时和默认请求头部等。

五、总结

本文主要介绍了如何安装和使用axios来发送HTTP请求。我们介绍了如何发送GET和POST请求，以及如何配置请求、取消请求、使用拦截器、并发请求、保护应用程序免受CSRF攻击和创建自定义axios实例。有了这些实用的功能，axios的使用变得更加简单和高效。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293264.html