axios 安装
$ npm install axios --save
在项目目录创建 lib 目录
创建 http.js 来设置axios
import axios from 'axios'
import router from '@/router'
const DEV_BASE_URL = 'http://localhost:8000/api'
const PRO_BASE_URL = '/api'
axios.defaults.baseURL = process.env.NODE_ENV === 'production' ? PRO_BASE_URL : DEV_BASE_URL
axios.defaults.baseURL = '/api'
axios.defaults.timeout = 5000
// http request 拦截器
axios.interceptors.request.use(
config => {
// 判断是否存在token，如果存在的话，则每个http header都加上token
let token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `token ${token}`
} else {
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
return config
},
err => {
return Promise.reject(err)
})
// http response 拦截器
axios.interceptors.response.use(
response => {
return response
},
error => {
if (error.response) {
switch (error.response.status) {
case 401:
// 返回 401 清除token信息并跳转到登录页面
// store.commit(types.LOGOUT);
router.replace({
path: 'login',
query: {redirect: router.currentRoute.fullPath}
})
}
}
// 返回接口返回的错误信息
return Promise.reject(error.response.data)
})
export default axios
我们来解释一下这段代码的意思
axios.defaults.baseURL 基础url，我们可以根据生产环境和开发环境来指定访问不同的URL，我们的应用最终会部署在同一域名下，这里我去掉了这个逻辑，统一采用 /api前缀。
axios.defaults.timeout 设置了请求超时时间5秒
下面是重点，分别设置请求(requet)和响应(response)的拦截器，增加一些全局设置。
我们在同一域名下部署应用，用cookie session的认证方式也可以控制访问，但通常为了考虑兼容app或小程序或者其它客户端的数据访问，我们采用token认证的方式，在用户登陆完成验证后会返回一个token用于后边的会话，再之后的请求就要加上这个token，我们把token放在http request的header里。
request的逻辑，从localStorage取token，如果有就加到header里，如果没有就跳转到登陆页
response的逻辑，返回正常的结果直接return出去，出错的情况，如果是401，则清理本地存储并跳转登陆页。
配置api代理
api代理可以方便的解决跨域问题，与服务端通讯，比如下面的配置， 我们的项目开发环境默认监听的是8080端口，在访问数据时，将8080端口的url访问重定向到另一个8000端口的服务，传递路径和参数，并返回结果。
修改config/index.js 配置 proxyTable
proxyTable: {
'/api': {
target: 'http://localhost:8000/'
}
},
将对项目 /api 路径下的访问代理到 8000 端口的服务上, 再后边的章节里会有具体的操作，暂时先配置上。
rpc和restful api的选择
插一段RPC和restful api选择，具体的理念对比网上去科普吧，
我的习惯是如果是标准的数据对象操作--增删改查就用restful api，其它的rpc
不要为了接口而接口，技术永远是解决效率和效益的问题，实际点用最适合的。
