封装axios,带请求头和响应头

import axios from "axios";
import qs from "qs"; //处理参数
import router from ../router;
import { Loading } from element-ui;
import { Message } from element-ui;

let loading = null;

//开始加载动画
function openLoading(){
  loading = Loading.service({
    lock:true,
    text:拼命加载中...,
    background:rgba(0,0,0,.7)
  });
}

//关闭加载动画
function closeLoading(){
  loading.close();
}

//添加请求拦截器
axios.interceptors.request.use(
  config => {
    //加载动画
    openLoading()
    if(localStorage.sessionId){ //如果我的sessionId存在(sessionId其实就是token)
      // 设置统一的请求header
      config.headers.Authorization = localStorage.sessionId //授权(每次请求把sessionId带给后台)
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//添加响应拦截器
axios.interceptors.response.use(
  response => {
    closeLoading()//关闭加载动画
    if(response.data.errorCode == -1){ //后端反回的状态值,本应该errorCode是status
      Message({
        type:warning,
        duration:1500,
        showClose: true,
        message:当前登录已失效,请从新登录!
      })
      localStorage.removeItem("sessionId")//清除sessionId
      localStorage.removeItem("username")//清除username
      localStorage.removeItem("modules")//清除权限
      router.push("/logon")//让用户从新回到登录页面
    }
    return response;
  },
  error => {
    closeLoading() // 关闭加载动画
    return Promise.resolve(error.response);
  }
);

// axios.defaults.baseURL = "http://10.26.4.18:8080/neixuan"; // 测试
axios.defaults.baseURL = "http://10.26.4.18:8081/neixuan";    // 开发
// axios.defaults.baseURL = "https://xxxxxxxx.com/neixuan"; // 线上

axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 6000; //设置请求超时时间

function checkStatus(response) {
  return new Promise((resolve, reject) => {
    if(response && (response.status === 200 || response.status === 304 || response.status === 400)){
      resolve(response.data);
    }else{
      // reject({
      //   state: "0",
      //   message: "网络异常"
      // });
      Message({
        type:error,
        showClose: true,
        message:网络异常,请检查网络连接是否正常!
      })
    }
  });
}

export default {
  post(url, params) {
    return axios({
      method: "post",
      url,
      data: params
    }).then(response => {
      return checkStatus(response);
    });
  },
  get(url, params) {
    params = qs.stringify(params);
    return axios({
      method: "get",
      url,
      params
    }).then(response => {
      return checkStatus(response);
    });
  }
};

使用:在main.js里面引入这个文件,并挂载到vue原型上,这样可以通过this.xxxx去拿到

import axios from ./api/api.js   //引入axios文件夹
Vue.prototype.$axios = axios;   //挂载到整个Vue原型上

axios 的使用:在需要请求的页面如下引用

//post请求
this.$axios.post(url,{key:value}).then(res =>{
   cons.log(res,后端返回数据) 
})
//get请求
this.$axios.get(url,{key:value}).then(res =>{
   cons.log(res,后端返回数据) 
})

 

 

封装axios,带请求头和响应头

上一篇:Parallax Mapping


下一篇:解释一下,@SpringBootApplication