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配置