Vue 进阶教程之：Axios配置JWT/封装插件/发送表单数据
小编推荐：Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。
尤雨溪之前在微博发布消息，不再继续维护 vue-resource，并推荐大家开始使用 Axios，本文就说一下在 Vue 项目里使用 Axios 配置 JWT 、全局拦截请求、发送表单数据等等。
本文里使用的示例代码，已测试能正常使用
首先请务必已仔细阅读 Axios 文档并熟悉 JWT：
- 中文文档
- 英文文档
- JWT 中文文档
安装
npm i axios
npm i es6-promise
为什么要安装 promise polyfill ？虽然 Axios 的 GitHub 主页开头说了支持 IE8，但文档最下面又「偷偷」说，前提是浏览器支持 promise （太鸡贼了），如果你不用关心浏览器兼容，那就不用安装 es6-promise （那你也太幸福了）。
把 Axios 配置成 Vue 插件
用过 vue-resource 的都知道，它本身封装成了 Vue 插件，可以直接在 Vue 组件里使用 this.$http， Axios 本身虽然没有封装，但我们也可以手动把它封装成 Vue 插件。
具体原理请看 Vue框架引入JS库的正确姿势，下面我就用代码演示一下：
AxiosPlugin.js↓
require('es6-promise').polyfill() // 引入一次就行
import axios from 'axios'
// 创建 axios 实例
// 这里 export 的原因是方便组件外使用 axios
export const Axios = axios.create({
baseURL: 'xxx',
timeout: 5000,
})
// 将 Axios 实例添加到Vue的原型对象上
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$http', { value: Axios })
}
}
main.js↓
import Vue from 'vue'
import AxiosPlugin from 'xxx/xxx/AxiosPlugin'
Vue.use(AxiosPlugin)
使用 axios 示例
在组件内部↓↓
// GET 获取用户信息
// http://xxxx/user?a=1&b=2
const data = {
params: {
a: 1,
b: 2,
}
}
this.$http.get(url, data).then(res => {
console.log(res)
})
// POST 请求
const data = {
a: 1,
b: 2,
}
this.$http.post(url, data).then(res => {
console.log(res)
})
在组件外部↓↓
// POST
import { Axios } from 'xxx/xxx/AxiosPlugin'
Axios.post(url, data)
以上是 Axios 的基本配置，下面我们说一下如何以 x-www-form-urlencoded 格式发送表单数据、设置 JWT 的 token 、以及 token 过期自动登录。
高级配置
废话不多说，直接上完整的代码，伸手党的福利
AxiosPlugin.js↓
require('es6-promise').polyfill()
import axios from 'axios'
export const Axios = axios.create({
baseURL: 'http://xxxxx/',
timeout: 10000,
})
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
Axios.interceptors.request.use(config => {
// 设置以 form 表单的形式提交参数，如果以 JSON 的形式提交表单，可忽略
if(config.method === 'post'){
// JSON 转换为 FormData
const formData = new FormData()
Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))
config.data = formData
}
// 下面会说在什么时候存储 token
if (localStorage.token) {
config.headers.Authorization = 'JWT ' + localStorage.token
}
return config
},error =>{
alert("错误的传参", 'fail')
return Promise.reject(error)
})
//返回状态判断(添加响应拦截器)
Axios.interceptors.response.use(res =>{
//对响应数据做些事
if(!res.data.success){
alert(res.error_msg)
return Promise.reject(res)
}
return res
}, error => {
if(error.response.status === 401) {
// 401 说明 token 验证失败
// 可以直接跳转到登录页面，重新登录获取 token
location.href = '/login'
} else if (error.response.status === 500) {
// 服务器错误
// do something
return Promise.reject(error.response.data)
}
// 返回 response 里的错误信息
return Promise.reject(error.response.data)
})
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$http', { value: Axios })
}
}
main.js↓
import Vue from 'vue'
import AxiosPlugin from 'xxx/xxx/AxiosPlugin'
Vue.use(AxiosPlugin)
Login.vue ↓
export default {
name: 'Login',
data() {
return {
username: '',
password: '',
}
},
methods: {
onLogin() {
const { username, password } = this
const data = {
username,
password
}
this.$http.post('url', data)
.then(res => {
// 登录成功
if(res.token) {
// 储存 token
localStorage.token = res.token
}
})
.catch(error => {
// 登录失败
// 验证后端返回的错误字段，如果匹配，提示用户
// axios 配置里必须要 return Promise.reject(error.response.data) 才能拿到错误字段
if(error.xxx == 'xxx') {
alert('用户名或密码错误！')
}
})
}
}
}
以上代码在好几个项目里都正常使用，没有问题
具体还可以参照我写的一个开源项目
vue-shop
作者：Yi罐可乐
链接：https://www.jianshu.com/p/aeaa353da89b
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线，Fundebug累计处理了9亿+错误事件，得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用！
