基于vue-element-template项目开发总结(二)

接着上一篇，页面我们已经会写了，接下来就是与后台对接请求数据

axios封装

我这封装的比较简单，可以根据自己项目实际需求进行修改

首先导入：

接下来创建一个axios实例

const service = axios.create({
  baseURL: 'http://www.res.com', // url = base url + request url
  timeout: 30000 // request timeout
})

request 拦截器:

// 在request 拦截器中, 展示进度条 NProgress.start()
// 请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
service.interceptors.request.use(config => {
  NProgress.start()
  // 为请求头对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

我这做的比较简单，只是添加和一个进度条一个token

response响应拦截器：

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code == 404||res.code==403) {
      window.sessionStorage.removeItem("token")
      router.push('/')
    }
    NProgress.done()
    return res
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

到此一个简单的axios请求就封装好了
接下来就是写接口请求了

页面调用：


这就是我在项目中使用aixos的流程