axios请求拦截和响应拦截ui框架使用的elementui

1. 安装

   npm install axios --save

2. 导入 axios

   import axios from 'axios'import router from '@/router'import store from '@/store/index'import { Loading,Message } from 'element-ui'

3. 创建axios实列

   baseURL //(基本路径)
   timeout  //(设置请求时间超时)
   const request = axios.create({const request = axios.create({  baseURL:'/api',//开发   // baseURL:process.env.VUE_APP_BASE_API,//生产  timeout: 1000 * 90,  withCredentials: true})

4. 使用elementui实现请求时显示加载loading......

   let loading=null// 加载function openFullScreen2() {   loading = Loading.service({    lock: true,    text: '加载中...',    spinner: 'el-icon-loading',    background: 'rgba(0, 0, 0, 0.7)'    // background: '#fff'  });}

5. 请求拦截

   /** * 请求拦截 */request.interceptors.request.use(  config => {  //请求时config里面有请求的全部信息可以打印一下看看    openFullScreen2()    if(store.getters.token){ //判断是否登录（登录后返回token）      let userinfo=store.getters.userinfo //登陆后返回的基本个人信息      config.url=`${config.url}?token=${store.getters.token}` //配置基本请求路径（登陆后每个请求都需要携带token令牌）      let xin={    //配置公共参数        system:userinfo.system,        model:userinfo.model,        appId:userinfo.appId,        uid:userinfo.uid,        role:userinfo.role,        departmentId:userinfo.departmentId      }      config.data=JSON.stringify({...xin,...config.data}) //每次请求将公共参数与传进来的参数相结合      // config.headers['token'] =store.getters.token// 请求头带上token    }    config.headers['Content-Type'] = 'application/json' // 配置请求头headers    return config  },  error => {    loading.close();  //请求错误关闭loading加载状态    return Promise.reject(error)   //返回错误信息  })

      
6. 响应拦截

   /** * 响应拦截 */request.interceptors.response.use(  response => {  //响应时response里面有响应的全部信息    // console.log(response.data)    loading.close();  //响应完关闭loading状态    if (response.data && response.data.code === 401) {   //response.data.code为响应的状态码      // console.log(response.data.code)      // 401, token失效      // clearLoginInfo()      // router.push({ name: 'login' })    }else if(response.data && response.data.code==='100'){ //本公司运用的时100表示token失效      Message.error(response.data.msg) //弹出登录失效错误消息      store.dispatch('clearLogin',router)  //退出登录并清理数据    }    return response  },  error => {    loading.close(); //响应发生错误时关闭loading加载状态    return Promise.reject(error) //返回错误信息  })

      
7. 导出

   export default request

在文件里运用

• 导入自己刚刚写的文件

import request from '@/utils/request'

• 导出方法

  //用户登录接口export function LoginFn(data){    return request({        url:'/user/login',        method:'post',        data:JSON.stringify(data)    })}//用户退出接口export function logout(data){    return request({        url:'/user/logout',        method:'post',        data:JSON.stringify(data)    })}