Vue axios封装

1、安装VUEX和AXIOS

npm install vuex --save //Vuex
npm install --save axios //axios

2、axios 请求和响应拦截 src/service/request.js

import axios from 'axios';
import store from '@/store/store.js';

 // 创建axios实例
const service = axios.create({
  baseURL: '/api', //代理
  timeout: 15000 // 请求超时时间
})

// 添加请求拦截器
service.interceptors.request.use(
  function (config) {
    console.log(config,"请求前拦截")
    //统一参数 post请求
    if(config.data){
      // config.data.token=sessionStorage.getItem("Token");
    }
       //统一参数 get请求
    if(config.params){
      // config.params.token=sessionStorage.getItem("Token");
    }
    return config;
  }, 
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
// 添加响应拦截器
service.interceptors.response.use(
    function(response) {
      //请求正常则返回
      return Promise.resolve(response);
    },
    function(error) {
      // 请求错误则向store commit这个状态变化 --vuex
      console.log(error,"响应拦截错误")
      const httpError= { 
        hasError:true,
        status:error.response.status,
        statusText:error.response.statusText
      };
      store.commit('ON_HTTP_ERROR', httpError);
      return Promise.reject(error);
    }
);

export default service;

3、VUEX文件 src/store/store.js

import Vue from 'vue' ;
import Vuex from 'vuex';
Vue.use(Vuex);

const store= new Vuex.Store({
    state:{
        httpError:{
            hasError:false,
            status:'',
            statusText:''
        },
    },
    mutations:{
        ON_HTTP_ERROR(state,payload){
            state.httpError = payload;
        },
    }
})
export default store;

4、API文件 //service/api.js

import request from '@/service/request';
//配置查询
export function programQuery(data) {
  return request({url: "program/query",method: "post",data:data});
}

5、组件使用接口

	import {programQuery} from "@/service/api" //引入接口
    methods:{
        //查询记录
        programQuery(){
             programQuery(this.programQueryForms).then(response => {
               let back_data=response.data.data;   //存储数据
            })
        },
    },