axios 组件 的使用

axios 组件 的使用

现在我们通过webpack+vue-cli搭建起了一个vue项目的框架，如果我们需要在vue组件中使用axios向后台获取数据。

1. 

cnpm install axios  

或者npm 安装

2. 在项目main.js中引入 axios

import axios from 'axios'
import qs from 'qs'

3. 配置axios

Vue.prototype.qs = qs;

Vue.prototype.$ajax = axios; （在项目中就可以用$ajax代替axios）

例如：

this.$ajax("filereport/recordList?" + qs).then((res) => {

var data = res.data.data;

console.log(data)//这就是从数据库获取到的数据

}

axios.defaults.baseURL = 'http://....'; (接口网址)

//这是请求头信息
//将用户的tokenId作为一个请求头返回给服务器
axios.defaults.headers.common['tokenId'] = sessionStorage.tokenId;

axios.defaults.headers.common['Content-Type'] = 'application/json';

//拦截器，登录时，服务器会签发一个tokenId,用户每次请求的时候都要带上 ，如果token是空，就跳到登录界面
axios.interceptors.response.use((res) => {
  var status = res.data.status
  switch (status) {
    case 1300 :
    case '1300' :
    case 1500 :
    case '1500' :
      sessionStorage.tokenId = ''
      router.push({name: 'login'})
  }
  return res
})