手把手带你在vue中封装axios（含携带token）

---

前言

在前端的高速发展下，单页面应用大多采用前后端分离的开发思路，现在帮助前后端交互的工具数不胜数，axios无疑是当今最受欢迎的http库，但是你真的玩透了axios吗？接下来，我们将一起进行一次axios的封装体验，做出属于自己的axios。（本次封装演示建立Vue项目中）

一、认识axios

此环节带领大家了解axios，如果熟练的同学可直接移步到下面的封装环节哦！

1、axios是什么？

官方解释：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2、为什么要用axios？

axios最大的亮点就是它支持了ES6里的 Promise Api，感兴趣的同学可以去看一看阮一峰写的 《ES6入门教程》，传送门：ES6入门教程

特性

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

废话不多说，我们直接开始！

二、封装axios

1.引入库

使用npm

$ npm install axios

使用yarn

$ yarn add axios

使用bower

$ bower install axios

2.建立封装axios实例文件

因为项目一般都是工程化，所以我们得建立一个文件来单独封装axios，这样才能更加清晰。

通常我们在项目src目录下新建utils文件夹，然后在其中新建 request.js文件，这个文件是主要书写axios的封装过程。

3.导入所需依赖

// 导入axios
import axios from 'axios'
// 导入element的message组件
import { Message } from 'element-ui'
// 导入其他文件里的localStorage方法（操作token时用到，后面将给出详细代码）
import { setLocalStorage,getLocalStorage } from '@/utils/utils'

4.创建axios实例

首先，我们根据文档提供的create方法新建一个axios实例

const instance = axios.create({
  // baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。
  // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
  baseURL: baseUrl,
  // timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）
  timeout: 60000,
  // headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})

如果你想使用原生的axi