axios面试题详解

一、axios简介

axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境中发送请求。它具有以下几个特点：

1、支持浏览器和Node.js

//axios在浏览器和Node.js中均可使用
import axios from 'axios';

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

2、支持Promise API

//使用Promise API发送请求
axios.get('/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3、支持请求和相应拦截器

//使用请求和相应拦截器对请求和响应进行操作
axios.interceptors.request.use(function (config) {
    //在发送请求之前做些什么
    return config;
  }, function (error) {
    //对请求错误做些什么
    return Promise.reject(error);
});

4、支持取消请求

//通过cancelToken参数来实现取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('用户取消操作');

5、支持多种Content-Type

//使用不同的Content-Type发送请求
axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  });

axios.post('/user', new FormData(), {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  });

二、axios面试题的解答

以下是面试中可能会遇到的几个问题，给出解答：

1、axios和fetch的区别是什么？

axios和fetch都是用于发送请求的工具，它们有以下区别：

1、fetch是浏览器原生提供的API，而axios是第三方库；

2、fetch默认不会带cookie，需要添加credentials: 'include'来开启，而axios默认会携带cookie；

3、axios支持IE8+，而fetch不支持IE；

4、axios可以对请求和响应进行拦截，fetch不支持；

5、axios支持在请求参数中添加cancelToken来取消请求，fetch不支持。

2、如何在axios中同时发送多个请求？

axios提供了并发请求的功能，可以使用axios.all或axios.spread方法来同时发送多个请求。其中，axios.all会将多个请求封装成一个Promise实例，同时触发所有请求，并等待所有请求都响应之后再返回结果；axios.spread用于将返回的结果数组展开，分别传入回调函数中。

axios.all([
    axios.get('/user/1'),
    axios.get('/user/2')
  ])
  .then(axios.spread(function (user1, user2) {
    console.log(user1, user2);
  }));

3、如何在axios中设置全局默认的请求头？

可以使用axios.defaults.headers对象来设置全局默认的请求头：

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

4、如何使用axios.CancelToken取消请求？

使用axios.CancelToken.source()方法可以创建一个cancelToken对象。将cancelToken对象作为请求参数的cancelToken属性值即可实现取消请求。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消', thrown.message);
  } else {
    // 处理错误
  }
});

source.cancel('用户取消操作');

5、如何使用axios实现文件上传？

可以使用FormData对象来提交文件上传请求。使用headers配置项中的'Content-Type'为'multipart/form-data'即可实现文件上传功能。

const formData = new FormData();
formData.append('file', file);

axios.post('/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

三、总结

axios是一个功能强大的HTTP客户端工具，它支持浏览器和Node.js环境中发送请求，可以使用Promise API、请求和相应拦截器、取消请求等功能，同时还支持多种Content-Type类型和并发请求。在开发过程中，合理使用axios的功能可以提高开发效率、优化用户体验。