对axios的二次封装

欢迎访问我的博客地址 : 博客地址
目录

在src目录下建立一个request文件夹。里面建立两个文件：
–http.js
–api.js

源码内容
http.js

import axios from 'axios' // 引入axios
import store from '../store/index' // 引入Vuex
import router from '../router' // 引入vue-router
import { Message, Loading, } from 'element-ui' //局部引入UI框架组件
let loadingInstance = null;
// 环境的切换
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '' // 开发环境
} else if (process.env.NODE_ENV === 'debug') {
    axios.defaults.baseURL = '' // 调试环境
} else if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = '' // 生产环境
}
axios.defaults.timeout = 10000;

// 请求拦截器
axios.interceptors.request.use(
    config => {
        loadingInstance=Loading.service({       //服务式调用
            lock: true,
                  text: '拼命加载中...  ',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
        });
        if (localStorage.getItem('Authorization')) {
            config.headers.Authorization = `Bearer` + " " + localStorage.getItem('token'); //查看是否存在token
            return config;
        } else if (config.isUpload) {
            config.headers = { 'Content-Type': 'multipart/form-data' } // 根据参数是否启用form-data方式
            return config;
        } else {
            config.headers = { 'Content-Type': 'application/json' }
            return config;
        }
    },
    error => {
        return Promise.error(error)
    })

// 响应拦截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {//状态码为200
    console.log(response)

    setTimeout(()=>{
        loadingInstance.close()//关闭loading
    },500)
    
    return response.data
  }else {               
    return Promise.reject(response)
  }
})

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} config [请求时url后直接加的参数，默认为空]
 */
export function get(url, params, config = { add: '' }) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }, config).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @param {Object} config [是否启用multipart/form-data格式请求，默认为false]
 */
export function post(url, params, config = { isUpload: false }) {
    return new Promise((resolve, reject) => {
        axios.post(url, params, config)
            .then(res => {
                resolve(res.data)
            })
            .catch(err => {
                reject(err.data)
            })
    })
}

app.js

import {get,post} from './http.js';
// post格式
export const register = p => post('/api/user/register', p);
// get格式
export const login = g => get('../mock/mock.json', g);

请求示例
使用之前现在当前页面引用：import {login,register} from '@/request/api.js'
post请求(不需要form-data方式)

    let postData = {
      phone: this.loginForm.account.toString(),
      password: this.loginForm.pass
    };
    register(postData)
      .then(res => {
        if (res.code == 0) {
          console.log(res);
        } 
      })
      .catch(err => {
        console.log(err);
      });

post请求(需要form-data方式)

     let formData = new FormData();
     formData.append("phone", this.ruleForm.phone.toString());
     formData.append("password", this.ruleForm.pass);
     register(formData, { isUpload: true })
       .then(res => {
         console.log(res);
       })
       .catch(err => {
         console.log(err);
       });

get请求(直接在请求接口后加参数的情况，如：/api/{id})

   login(null,{add:@/mock.json}).then(res=>{
      console.log(res)
    }).catch(err => {
      console.log(err);
    });

get请求(需要传一组参数)

   let postData = {
     page: page,
     size: size
   };
   login(postData)
     .then(res => {
       console.log(res);
     })
     .catch(err => {
       console.log(err);
     });

get请求(没有参数直接请求即可)

  login()
     .then(res => {
       console.log(res);
     })
     .catch(err => {
       console.log(err);
     });