上文中Vue实战12—Api接口封装引入代理数据与Element-ui库，我们引入了Element-Ui库，和封装了接口，同时也有朋友在评论里说axios的封装不好，本篇文章，将优化这块儿的封装，同时介绍如何利用Element-Ui美化我们的导航栏。本项目地址：

https://gitee.com/vuejslearn/news-list.git

创建axios拦截器

打开项目中util目录里的http.js文件，在开始的时候，我们创建一个axios实例：

const http = axios.create({
 // 请求超时时间
 timeout: 5000
})

实例很简单，只有一个请求的超时时间。接着，我们在下面创建请求的拦截器。这里要感谢热心评论的网友，指出的axios封装的问题，axios用promise封装确实不太好。这里如果对于数据的通用处理，最好还是使用拦截器比较好。axios的拦截器分两类：请求拦截器，相应拦截器，是指在请求或响应被 then 或 catch 处理前拦截它们。

因此，我们继续实现我们的拦截器：

• 请求拦截

我们在请求拦截器里，添加一个Authorization的header，用来每次请求传递一个token。这是为了适配目前大多数前后端开发采用的登录验证方式。token可以是用户登录成功后，后台返回来的，前端保存到本地，每次请求时，带上这个token。供后端进行验证，如果合法，则继续访问，否则返回异常。

具体的代码：

http.interceptors.request.use(config => {
 config.headers['Authorization'] = localStorage.getItem('token')
 return config
},
error => {
 Notification.error({
 title: '错误',
 message: '请求错误'
 })
 return Promise.reject(error)
})

这里引入了element-ui的通知组件。这个组件是如何使用的呢？一会儿我们再介绍。它的作用就是当请求错误后，会在屏幕的右上角提示一个信息，告诉用户错误了。

• 相应拦截器

同理，我们实现一个相应拦截器，通过之前的关于axios文章，我们知道axios放回的response是固定格式的，而我们后端返回的数据，都是放到了data里，而用于判断请求状态的，有两类：status、statusText。一个是状态码、一个是状态编号。这里我们使用状态码，也就是说，它等于200时，意味着请求是成功的，我们成功的请求到了后台数据。但是，这仅仅代表，请求成功了，不代表后台返回的数据是正确的，一般的做法是，在等于200后，再进一步的做判断，是否后台返回了正确的数据。

具体的代码：

http.interceptors.response.use(response => {
 if (response.status === 200) {
 // 这里还可以进一步对后端返回的数据做判断，比如后端时机是返回一个异常信息。这里可以做一个错误的信息提示。
 return response.data
 } else {
 Notification.error({
 title: '错误',
 message: response.data.message
 })
 }
},
error => {
 Notification.error({
 title: '错误',
 message: '网络错误'
 })
 return Promise.reject(error)
}
)

添加Element通知

刚刚我们看到了在拦截器里，我们引入了Element的通知，这个通知长什么样呢？请看：

就是这样的，他会在浏览器的右上角出现几秒中，然后自动消失。怎么引用呢？首选，我们在文件的开头，引入它：

import { Notification } from 'element-ui'

然后，就是正常的使用了：

Notification.error({
 title: '错误',
 message: '请求错误'
 })

这个是错误的通知，正确的通知为：

 Notification({
 title: '成功',
 message: '这是一条成功的提示消息',
 type: 'success'
 })

返回的message内容，可以是动态的，根据后台传递的message进行动态显示。

最后，我们再删除掉原有的axios封装，同时修改main.js文件，再修改之前应用的get方法，现在统统改成了http方式了。具体见代码即可。

优化导航栏

本项目的导航栏，我们用到了element的导航栏、按钮、输入框。

• 导航栏

element的导航栏，可以设置横向的，也可以设置纵向的，很显然，我们使用横向的。

<el-menu mode="horizontal" class="menu">
 <el-menu-item index=""><a :href="this.url">首页</a></el-menu-item>
 </el-menu>

导航栏还可以设置子菜单，这里暂时我们不需要，我们只添加一个首页导航即可，后期有需求再增加。

• 按钮

按钮相关，我们只要一个登陆和一个组成即可，element的按钮默认给我们设置了样式，可以直接使用，很方便。

<el-row>
 <el-button type="primary" round>登录</el-button>
 <el-button type="danger" round>注册</el-button>
 </el-row>

像这样，就直接使用了，而且，默认是横向的，不用我们再写css。

element的输入框是很好用的，比如我们经常需要那种鼠标点击就出现下拉框提示的，输入内容自动提示的，element组件都为我们做好了封装。我们就选择了一个点击输入框就出现提示的组件：

<el-autocomplete
 class="inline-input"
 v-model="inputValue"
 :fetch-suggestions="querySearch"
 placeholder="请输入内容"
 suffix-icon="el-icon-search"
 @select="handleSelect"
 @keyup.enter.native="sendValue"
 ></el-autocomplete>

最后，我们在导航栏的最左边，添加一个logo，logo是我在网上随便做的一个，不是很好看。大家有好看的logo可以发给我一个。

完整的模板内容：

然后我们让这些组件按照我们的设计排列布局：

这样就实现了我们优化后的header了。感兴趣的朋友欢迎下载代码亲自运行一下，感受一下啦。

原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文章，喜欢的朋友欢迎关注。