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')
}

2.2 封装 Axios

index.js

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

const service = axios.create({
   
  baseURL: 'http://localhost:8888',	// 设置请求的地址
  timeout: 10000										// 设置超时时间, 10000 ms 
})
//request拦截器: 用于封装请求头
service.interceptors.request.
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值