详解axios在vue中的用法 以及token或者session验证,响应、拦截的配置

 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1、使用npm

npm install axios --save

2、引用axios

import axios from "axios";

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

具体配置代码如下，我们服务端是用token验证 备注有说明

这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期.如果过期则重新登录。

import axios from 'axios'
import store from '../store'
import router from '../router'
import {
  Message,
  Loading
} from 'element-ui'
let loading;

function startLoading() { //使用Element loading-start 方法 加载动画
  loading = Loading.service({
    lock: true,
    text: 'Loding',
    background: 'rgba(0,0,0,0.6)'
  })
}

function endLoading() { //使用Element loading-close 方法 关闭动画
  loading.close()
}
//生产环境判断 线下测试域名 线上服务器域名
const BASEAPI = process.env.NODE_ENV === 'development' ? 'http://114.115.211.170:8080/web/' : 'http://114.115.211.170:8080/web/'
// 创建axios实例
const request = axios.create({
  baseURL: BASEAPI, //请求接口域名
  timeout: 60000, // 请求超时设置
  withCredentials: false, //是否让axios请求携带 cookies 如果是用session验证此处为true 默认为false可以不写
  headers: {
    'content-type': 'application/json'
  } //请求头配置
});
// 请求拦截
request.interceptors.request.use(config => {
  startLoading();
  if (store.state.token) {
    // console.log(store.state.token)
    config.headers.token = `${store.state.token}`;
  } // 让每个请求头携带存入vuex中的token 根据实际情况自行修改
  return config;
}, error => {
  return Promise.reject(error);
});
//响应拦截
request.interceptors.response.use(response => {
  //结束加载动画
  endLoading()
  //此处判断token/ession是否过期然后跳转login页面 从新获取 我们后台token过期为-30
  if (response.data.code == -30) {
    router.push('/login')  
  }
  return response;
}, error => {
  endLoading()
  console.log(error)
  return Promise.reject(error);
});

export default request

具体使用：

上面配置文件命名为http.js 

import request from './http'
//get
request('xxxx/xxxxx')
 .then(res=> {
    console.log(res);
  })
  .catch( error=> {
    console.log(error);
  });

// post
request({
 method:'post',
 url: 'xxxx/xxxxx',
 data: {
 textbook_id:id,
 token:token
 }
})
 .then(res=> {
    console.log(res);
  })
  .catch(error=> {
    console.log(error);
  });