Vue 中 axios的封装与调用

Vue中axios封装

import { Message } from 'element-ui'; 引入element-ui 

axios.defaults.baseURL='地址'；

请求拦截

axios.interceptors.request.use(function(config=>{

   设置token

    config.headers.['token']=getToken() 获取token的方法

  return config;

}),function(error=>{

    return Promise.reject(error);

}));

响应拦截

axios.interceptors.response.use(function(response=>{

    失败提示公用

 if(response.data.code!=20000){

        Message ({

             message:response.data.message,

            type:'warning',

            duration:2000

        })

   }

    return response;

}),function(error){

Message({

        message:error.message,

        type:'error',

        duration:2000

    })

    return Promise.reject(error);

})

export default axios

Vue 代用封装方法

import request from'@/..' 引用封装地址

post引用方法

export function getdata(data){

return    request({

        method:'post',

         url:'ursr/infor....',

          data

    })

}

get 引用方法

export function getdata(data){

    return request({

        method:'get',

        url:'user/infor....',

        params:data

    })

}

delete 引用方法

export function getdata(){

    return request({

    mthed:'delete',

    url:`user/info..${data.id}`,

})

}

Token的设置set/获取get/删除delete方法

设置token

export function setToken(key,data){

    return sessionStorage.setItem(key,data)

}

获取 token

export function getToken(key){

    return sessionStorage.getItem(key)

}

移除token

export function removeToken(key){

    return sessionStorage.removeItem(key)

}