axios二次封装（GET,POST,PUT,DELETE）用到 项目里面，直接复制,注意路径问题

1. 安装

2. npm install axios; // 安装axios

3. 引入

4. 一般在项目的src目录中，新建一个utils文件夹，然后在里面新建一个http.js文件,http.js文件用来封装我们的axios,

5. /*这里是http.js*/
   
   /**
    * axios封装
    * 请求拦截、响应拦截、错误统一处理
    */
   import axios from 'axios';
   import router from '../router';
   // import { Message } from 'element-ui'
   // import store from '../store/index';
   
   /** 
    * 提示函数 
    * 禁止点击蒙层、显示一秒后关闭
    */
   
   /** 
    * 跳转登录页
    * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
    */
   const toLogin = () => {
       router.replace({
           path: '/login',
           query: {
               redirect: router.currentRoute.fullPath
           }
       });
   }
   
   /** 
    * 请求失败后的错误统一处理 
    * @param {Number} status 请求失败的状态码
    */
   const errorHandle = (status, other) => {
       // 状态码判断
       switch (status) {
           // 401: 未登录状态，跳转登录页
           case 401:
               toLogin();
               break;
               // 403 token过期
               // 清除token并跳转登录页
           case 403:
               localStorage.removeItem('token');
               // store.commit('loginSuccess', null);
               setTimeout(() => {
                   toLogin();
               }, 1000);
               break;
               // 404请求不存在
           case 404:
               break;
           default:
               console.log(other);
       }
   }
   
   // 创建axios实例
   var instance = axios.create({ timeout: 1000 * 12 });
   // 设置post请求头
   instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   /** 
    * 请求拦截器 
    * 每次请求前，如果存在token则在请求头中携带token 
    */
   // instance.interceptors.request.use(
   //     config => {
   //         // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
   //         // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
   //         // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
   //         // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
   //         // const token = store.state.token;
   //         token && (config.headers.Authorization = token);
   //         return config;
   //     },
   //     error => Promise.error(error))
   
   // 响应拦截器
   instance.interceptors.response.use(
       // 请求成功
       res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
       // 请求失败
       error => {
           const { response } = error;
           if (response) {
               // 请求已发出，但是不在2xx的范围 
               errorHandle(response.status, response.data.message);
               return Promise.reject(response);
           } else {
               // 处理断网的情况
               // eg:请求超时或断网时，更新state的network状态
               // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
               // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
               // store.commit('changeNetwork', false);
           }
       });
   export function get(url, params) {
       return new Promise((resolve, reject) => {
           axios.get(url, { params }).then(res => {
               // resolve(res.data)
               resolve(res.data)
           }).catch(err => {
               if (!err.response) {
                   // Message({
                   //     showClose: true,
                   //     message: 'get请求错误',
                   //     type: 'error'
                   // })
                   // console.log(err);
               } else {
                   reject(err.data)
               }
           })
       })
   }
   export function post(url, params) {
       return new Promise((resolve, reject) => {
           axios.post(url, params)
               .then(response => {
                   resolve(response)
               }, err => {
                   reject(err)
               })
               .catch((error) => {
                   reject(error)
               })
       })
   }
   
   export function deletes(url, params) {
       return new Promise((resolve, reject) => {
           axios.delete(url, params).then(res => {
               resolve(res.data)
           }).catch(err => {
               reject(err.data)
           })
       })
   }
   
   export function put(url, params) {
       return new Promise((resolve, reject) => {
           axios.put(url, params).then(res => {
               resolve(res.data)
           }).catch(err => {
               reject(err.data)
           })
       })
   }
   
   
   export default {
       instance,
       get,
       post,
       deletes,
       put
   };

6. 然后.在utils文件夹下 建一个api.js,放每个具体的请求方法

7. /*这里是api.js*/
   
   import { get,post,put,deletes } from '@/utils/http.js'
   
   const base = {
       // sq: 'http://localhost:9666' // 服务的地址
       // sq: 'http://www.bjzykjygt.com:807'//配置服务地址 237
       sq: 'http://www.bjzykjygt.com:6005'//配置服务地址 237
   }
   
   let api = base.sq
   // 
   export const listData = (params) => {
       return get(api + '/cockpit/listData', params)
   }

8. 在main.js中

9. //封装的Api组件 把组件导出
   import apiFun from "@/utils/api.js";
   Vue.prototype.$apiFun = apiFun; //设置全局请求接口api

10. 在vue页面中使用方法

11.      this.$apiFun.listData(params).then((res) => {
            if (res.code == 200) {
             console.log(res)
            }
          });