与服务器端通讯

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

不要为了接口而接口，技术永远是解决效率和效益的问题，实际点用最适合的。