vue如何配置网络请求

1. 新建公用js文件
2. 下载axios
3. 导入axios
4. 如果有elementui可以导出一个提示组件message
5. 导入vue-router，判断有无权限，如果没有权限，就重新跳转login登录页面

   import axios from 'axios'
   import router from '../router'
   
   import { Message } from 'element-ui'
   
   // 添加请求拦截器
   // axios.defaults.headers.post['Content-Type'] = 'application/json';//配置请求头
   axios.interceptors.request.use(function (config) {
       const accessuser = JSON.parse(localStorage.getItem('access-user'));
       if (accessuser) {
           config.headers.common['Authorization'] = 'Basic ' + accessuser.AuthToken;
       }
   
       return config;
   }, function (error) {
       // Do something with request error
       return Promise.reject(error);
   });
   
   // 添加一个响应拦截器
   axios.interceptors.response.use(function (response) {
       if (response.status === 200) {
           return Promise.resolve(response);
       } else {
           return Promise.reject(response);
       }
   }, function (error) {
       // Do something with response error    121.42.53.239:8089  47.100.13.186:8099/PSI/
       if (error.response.status) {
           switch (error.response.status) {
               // 401: 未登录
               // 未登录则跳转登录页面，并携带当前页面的路径
               // 在登录成功后返回当前页面，这一步需要在登录页操作。
               case 401:
               case 403:
                   localStorage.removeItem("access-user");
                   localStorage.setItem("dynamic-tag", "[]");
                   router.replace({ path: '/login' });
                   break;
   
               // 404请求不存在
               // case 404:
               //     Message.error({
               //         message: "网络请求不存在",
               //         duration: 2000
               //     });
               //     break;
               // case 500:
               //     Message.error({
               //         message: "网络连接失败，请稍后再试！",
               //         duration: 2000
               //     });
               //     break;
               // 其他错误，直接抛出错误提示
               default:
                   Message.error({
                       message: error.response.data.message,
                       duration: 2000
                   });
           }
       }
       return Promise.reject(error.response);
   })
   const base = process.env.VUE_APP_API_URL
   
   export const getBaseUrl = () => {
       return base;
   }
   
   
   export const POST = (url, params) => {
       return new Promise((resolve, reject) => {
           axios.post(`${base}${url}`, params).then(res => {
               resolve(res.data);
           }).catch(err => {
               reject(err)
           })
       });
   }
   export const GET = (url, params) => {
       return new Promise((resolve, reject) => {
           axios.get(`${base}${url}`, { params: params }).then(res => {
               resolve(res.data);
           }).catch(err => {
               reject(err.data)
           })
       });
   }
   
   export const PUT = (url, params) => {
       return new Promise((resolve, reject) => {
           axios.put(`${base}${url}`, params).then(res => {
               resolve(res.data);
           }).catch(err => {
               reject(err.data)
           })
       });
   }
   
   export const DELETE = (url, params) => {
       return new Promise((resolve, reject) => {
           axios.delete(`${base}${url}`, { params: params }).then(res => {
               resolve(res.data);
           }).catch(err => {
               reject(err.data)
           })
       });
   }
   
   export const exportExcel = (url, params) => {
       return new Promise((resolve, reject) => {
           axios.post(`${base}${url}`, params, { responseType: "blob" }).then(res => {
               resolve(res.data);
           }).catch(err => {
               reject(err.data)
           })
       })
   }
   
   
   /**  以 form-data 方式上传 文件 传入获取的文件即可 _t1 为当前上传时间 */
   export const importFile = (url, params) => {
     return new Promise((resolve, reject) => {
       let paramsFile = new FormData();
       paramsFile.append('_t1',new Date());
       for (const key in params) {
         const element = params[key];
         paramsFile.append(key,element);
       }
       
       axios.post(`${base}${url}`, paramsFile, { headers: {'Content-Type': 'multipart/form-data'} }).then(res => {
           resolve(res.data);
       }).catch(err => {
           reject(err.data)
       })
     })
   }
   
   // 如何使用？新建js文件，导入index.js封装的请求，‘as’  重命名 API . 如果是当前页面  .  默认指向index
   import * as API from '.'
   
   export default {
     getUserInfo:params => {
       return API.POST('api/user/info',params)
     },
   }
   
   // 在需要使用的vue文件中导入请求的文件
   import API from '@/api/login'
   
   API.getUserInfo(params).then(res => {
     consoel.log(res)
   })
   
    async getUserInfo(){
      let res = await API.getUserInfo(params)
      console.log(res)
    },
   
    // 喜欢的小伙伴请评论点赞哦，还想看什么文章评论在下方