面试官：Vue项目中有封装过axios吗？怎么封装的？

一、什么是axios，有什么特性

描述

axios是一个基于promise的HTTP库，可以用在浏览器或者node.js中。本文围绕XHR。

特性：

从浏览器中创建XMLHttpRequests
从node.js创建http请求
支持promise API
拦截请求与响应
转换请求数据与响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

背景

自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选，目前在github上有87.3k star。axios的熟练使用和基本封装也成为了vue技术栈系列必不可少的一部分。如果你还不了解axios，建议先熟悉 axios官网文档。

基本使用

安装

npm install axios -S

使用

import axios from 'axios'
// 为给定ID的user创建请求 
axios.get('/user?ID=12345')   
    .then(function (response) {     
        console.log(response);   
    })   
    .catch(function (error) {    
        console.log(error);   
    });  
// 上面的请求也可以这样做 
axios.get('/user', {     
    params: {ID: 12345}})   
    .then(function (response) {     
        console.log(response);   
    })   
    .catch(function (error) {     
        console.log(error);   
    });

二、Vue项目中为什么要封装axios

axios的API很友好，可以在项目中直接使用。但是在大型项目中，http请求很多，且需要区分环境，每个网络请求有相似需要处理的部分，如下，会导致代码冗余，破坏工程的可维护性，扩展性

axios('http://www.kaifa.com/data', {
  // 配置代码
  method: 'GET',
  timeout: 3000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  },
  // 其他请求配置...
})
.then((data) => {
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
  // 错误处理代码  
  if (err.response.status === 401) {
  // handle authorization error
  }
  if (err.response.status === 403) {
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

环境区分
请求头信息
请求超时时间
- timeout: 3000
允许携带cookie
- withCredentials: true
响应结果处理
- 登录校验失败
- 无权限
- 成功
...

三、Vue项目中如何封装axios

axios文件封装在目录src/utils/https.js，对外暴露callApi函数

1、环境区分

callApi函数暴露prefixUrl参数，用来配置api url前缀，默认值为api

// src/utils/https.js
import axios from 'axios'

export const callApi = (
  url,
  ...
  prefixUrl = 'api'
) => {
  if (!url) {
    const error = new Error('请传入url')
    return Promise.reject(error)
  }
  const fullUrl = `/${prefixUrl}/${url}`
  
  ...
  
  return axios({
    url: fullUrl,
    ...
  })
}

看到这里大家可能会问，为什么不用axios提供的配置参数baseURL，原因是baseURL会给每个接口都加上对应前缀，而项目实际场景中，存在一个前端工程，对应多个服务的场景。需要通过不用的前缀代理到不同的服务，baseURL虽然能实现，但是需要二级前缀，不优雅，且在使用的时候看不到真实的api地址是啥，因为代理前缀跟真实地址混合在一起了