Vue2 开发总结 axios 二次封装 | 请求、响应、渲染的大致流程分析

1. Axios 简介

---

Axios GitHub 地址：https://github.com/axios/axios
Axios 官网：https://axios-http.com/
Axios 是用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，运用非常广泛，前端框架例如 React、Vue 都是基于 Node.js 开发的，Node.js 可以开发 Web 应用程序中的后台系统。
（我们平时使用的 npm 命令本质上就是通过 Node.js 来运行的）

Promise 是由 JavaScript 中实现的 ECMAScript6 规范推出的新特性，主要解决了 JS 回调地狱的问题，通常用于异步编程，可以更好的处理回调的场景

Axios 本质上是 AJAX 的拓展版，所以它的功能和 AJAX 一样，向指定的 URL 发送请求，并处理结果。在 Github https://github.com/axios/axios 上，官方给出了许多示例。

2. Vue2二次封装Axios

---

由于我目前仅接触过Vue2，所以本篇的 Axios 是基于 Vue2版本对其应用。
运行环境：

• “axios”: “^0.17.1”
• “vue”: “^2.5.2”
• “element-ui”: “^2.0.10”

2.1 定义简易的 Token 工具脚本文件

在之前的学习中，我们会把用户登录信息记录到 session，但是这种方式的安全性并不高，只要拿到 浏览器的 sessionId 就可以在异地登录。而使用 token 能更好的记录用户信息，因为 token 相当于用户的身份凭证，具有时效性，既可以设置过期时间，又可以用来检验身份，同时支持在多个设备登录，为了方便，我们通过 浏览器支持的 JavaScript 内置对象 localStorage 来管理 token。
token.js

export function getToken() {
   
  return localStorage.token
}

export function setToken(token) {
   
  return localStorage.token = token
}

export function removeToken() {
   
  return localStorage.removeItem('token')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 封装 Axios

index.js

import {
   getToken} from '@/request/token'

const service = axios.create({
   
  baseURL: 'http://localhost:8888'
1
2
3
4
5