vue封装axios

一、安装axios npm install --save axios

二、在src下面创建文件夹api=>api.js(接口集合)+http.js(封装的请求)

三、在main.js中引用api.js和http.js

//引入两个文件
import api from './api/api'
import http from './api/http'
//挂载到VUE实例，以便全局使用
Vue.prototype.api = api;
Vue.prototype.http = http;

四、开始在http.js中写方法

import axios from 'axios';
import { Message } from 'element-ui';
let localhosts = 'http://www.xxx.com';   //请求的后台域名
axios.interceptors.request.use(config => {//请求之前(可以设置token)
    return config
},error =>{
    Message.error(error)
    return Promise.reject(error);
});
axios.interceptors.response.use(response => {//数据拿到之后
    return response.data
},error => {
    Message.error('Http请求失败，请联系管理员');
    return Promise.reject(error.response);;
});
function successfun(res){//处理后台返回的非200错误
    if(res.code === 200){
        return res
    }else{        
         Message.warning(res.message);
         return res;
    } 
}
function errorfun(res){
    if(res.code != 200){
        Message.error(res.message);
        return res;
    }
}
export default{
    post(url,data){//post请求
        return axios({
            method:'post',
            baseURL:localhosts,
            url,
            data: data,
            withCredentials: true,
            timeout:5000,//响应时间
        }).then(res => {
            return successfun(res)
        },err => {
            return errorfun(err);
        })
    },
    get(url,params){//get请求
        return axios({
            method:'get',
            baseURL:localhosts,
            url,
            params,
            withCredentials: true,
            timeout:5000,
        }).then(res => {
            return successfun(res)
        },err => {
            return errorfun(err)
        })
    }
    //(delete,put等请求同上)...
}

五、写api.js

export default {
    login: "/login",
}

六、使用

<script>
import Vue from 'vue'
export default {
    data () {
        return {
            
        }
    },
    created():{
        this.http.get(this.api.login)
         .then(res => {
            if(res.code == 200){
                this.info = res.data.list
                this.page = res.data
            }
         });
    },
}
</script>

 需要配置生产环境、测试环境、生产环境请移步 vue cli3配置