vue项目中API接口的管理和axios的使用详解（附登录小案例）🚩✔✔✔
在项目中，和后台交互数据这块，有三个流行的库。
-
jQuery ajax
$.ajax({
type: 'POST',
url: url,
data: data,
dataType: dataType,
success: function () {},
error: function () {}
})jQuery ajax是对原生XMLHttpRequest对象的封装，除此之外还添加了对JSONP的支持（用于解决跨域问题）,使用起来非常简单，传入参数即可。不过对于现在的MVVM项目来说，jq是不太适合的。原因如下：
- jQuery是针对MVC模式的，不符合现在MVVM模式的浪潮
- 单纯想使用ajax的话也必须引入整个jQuery库，体积太大不合理
- 不符合关注分离的原则
-
fetc
try{
let response = await fetch(url)
let data = response.json()
console.log(data)
}
fetch号称是ajax的替代品，是ES6出现的，使用了ES6中的promise对象。注意：fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
fetch优点：
符合关注分离的原则，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
基于Promise实现，支持asynv/await，写法简洁
脱离了XHR，是ES规范里新的实现方式
fetch缺点：
fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
fetch默认不会带cookie，需要添加配置项
fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
fetch没有办法原生监测请求的进度，而XHR可以
- 总的来说，fetch是底层的 API，可以把它当做原生的XHR，所以我们使用的时候还要像处理原生ajax一样进行封装
-
axios
axios({
method: 'post',
url: '/user/12345',
data: {
username: 'admin',
password: 'abc123'
}
}).then(res => console.log(res) )
.catch(err => console.log(err))Vue2.0,之后，尤雨溪大大推荐大家使用axios替换Jquery ajax。
axios是一个基于Promise用于浏览器和node.js的HTTP客户端，本质上也是对原生XHR的封装，不过它是Promise的实现版本，符合最新的ES规范。
axios优点：
- 拦截请求和相应
- 设置超时时间
- 自动转换JSON数据
- 客服端支持防CSRF
- 总结上面三种方式，axios提供了并发的封装，也没有fetch的各种问题，体积也相对较小，所以在我们的Vue项目中axios是首选的请求方式。
封装axios
axios封装了原生的XHR，让我们发送请求更为简单，但假设在一个成百上千个vue文件的项目中，我们每一个vue文件都要写axios.get()或axios.post()岂不是很麻烦？后期的维护也不方便，所以我们要对axios进行进一步的封装。
vue-cli项目的目录如上，我们在原有的目录基础上新建api与utils文件夹，utils里新建request.js文件，request.js代码如下：
import axios from 'axios'
import {
Message,
Loading
} from 'element-ui'
import router from '../router/index.js' //注意路径与文件名
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 50000 // request timeout
})
let loading // 定义loading变量
function startLoading () { // 使用Element loading-start 方法
loading = Loading.service({
lock: true,
text: '加载中...',
background: 'rgba(0, 0, 0, 0.7)'
})
}
function endLoading () { // 使用Element loading-close 方法
loading.close()
}
// 请求拦截 设置统一header
service.interceptors.request.use(
config => {
// 加载
startLoading()
if (localStorage.eleToken) {
config.headers.Authorization = localStorage.eleToken
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截 401 token过期处理
service.interceptors.response.use(
response => {
endLoading()
return response
},
error => {
// 错误提醒
endLoading()
Message.error(error.response.data)
const { status } = error.response
if (status === 401) {
Message.error('token值无效，请重新登录')
// 清除token
localStorage.removeItem('eleToken')
// 页面跳转
router.push('/login')
}
return Promise.reject(error)
}
)
export default serviceaxios实现过程：在request.js中做了三件事
-
创建axios，设置baseURL与超时时间
const service = axios.create({
baseURL: process.env.BASE_API, // api 的 base_url
timeout: 50000 // request timeout
})baseURL的设置在config/dev.env.js中
-
拦截请求
service.interceptors.request.use(
config => {
// 加载
startLoading()
//此处可统一设置请求头 ....
return config
},
error => {
return Promise.reject(error)
}
)-
拦截响应
service.interceptors.response.use(
response => {
endLoading()
return response
},
error => {
// 错误提醒
endLoading()
Message.error(error.response.data)
//此处可对状态码做一个判断
// 跳转回登录界面
//router.push('/login')
}
return Promise.reject(error)
}
)项目中我用了element-ui组件库，Message是一个消息弹框，Loading是加载图
登录小案例~~
封装完了axios，我们通过一个登录案例来看看如何在项目中使用。
登录首先撸个界面，放两个input框和一个button
撸完界面我们在来到api文件夹，建立一个login.js
//login.js
import request from '@/utils/request'
import qs from 'qs'
export function doLogin (username, password) {
let data = {
username,
password
}
data = qs.stringify(data)
return request({
url: '/user/login',
method: 'post',
data
})
}我这里引入了qs库，qs.stringify()可以将对象转成字符串形式，这是因为后台接口的要求，一般来说axios传入data对象即可
代码里有一个doLogin方法，接收两个参数：用户名和密码
然后直接调用request.js中封装的axios发送post请求
return request({
url: '/user/login',
method: 'post',
data
})我们再回到登录界面中，
首先把doLogin方法引进来
- 然后给按钮绑定如下事件：
submit () {
doLogin(this.username, this.password).then(res => {
console.log(res)
if (res.data.resultCode === 200) {
const token = 'token'
Message.success('登录成功')
// 存储token到浏览器
localStorage.setItem('eleToken', token)
this.$router.push('/')
} else {
Message.error(res.data.resultMsg)
console.log('错误')
}
})
},上面代码就是调用doLogin方法，判断回调中res的状态，登录成功则存储token，跳转页面。失败则提示错误
路由拦截
上面实现了登录的功能，但还不够完善，仅仅这样做，未登录的用户直接在浏览器中输入地址不是一样可以访问页面？
这个问题也不难解决，vue-router为我们提供了router.beforeEach
- 来到router.js
router.beforeEach((to, from, next) => {
let isLogin = !!localStorage.eleToken
if (to.path === '/login' || to.path === '/register') {
next()
} else {
isLogin ? next() : next('/login')
}
})加上如上代码，通过localStorage判断是否登录，如果路径不是登录注册的页面，则强制跳回登录界面
