axios封裝和使用

1.main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import rules from './utils/formCheck.js'
import moment from "moment"
import _ from 'lodash'
// 引用API文件
import store from "@/store/index.js";

Vue.filter('formatDate', function(value) {
        return Moment(value).format('YYYY-MM-DD HH:mm:ss')
    })
    // step1：引入 axios
import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = '/api'
import { env } from 'shelljs'
// step2：把axios掛載到vue的原型中，在vue中每個組件都可以使用axios發送請求,
// 不需要每次都 import一下 axios了，直接使用 $axios 即可
// step3：使每次請求都會帶一個 / 前綴
Vue.use(ElementUI)

Vue.config.productionTip = false
Vue.prototype.$rules = rules
Vue.prototype.$moment = moment;

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

2.http.js

import axios from "axios";
axios.defaults.timeout = 5000; //超時時間設置
axios.defaults.withCredentials = true; //true允許跨域
//Content-Type 響應頭
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";
let token = localStorage.getItem('authorization');
axios.defaults.headers.post["authorization"] = token;
if (process.env.NODE_ENV === "production") {
    /*第二層if，根據.env文件中的VUE_APP_FLAG判斷是生產環境還是測試環境*/
    if (process.env.VUE_APP_FLAG === "pro") {
        //production 生產環境
        axios.defaults.baseURL = "http://localhost:3000";
    } else {
        //test 測試環境
        axios.defaults.baseURL = "";
    }
} else {
    //dev 開發環境
    axios.defaults.baseURL = "http://localhost:3000";
}

// 響應攔截器
axios.interceptors.response.use(
    response => {
        // 如果返回的狀態碼為200，說明接口請求成功，可以正常拿到數據
        // 否則的話拋出錯誤
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服務器狀態碼不是2開頭的的情況
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                // 401: 未登錄
                case 401:
                    router.replace({
                        path: "/login",
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403:
                    this.$message("管理員權限已修改請重新登錄");
                    // 清除sessionStorage
                    // store.commit("qiut");
                    // 跳轉登錄頁面，並將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉需要訪問的頁面
                    setTimeout(() => {
                        router.replace({
                            path: "/login",
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;

                    // 404請求不存在
                case 404:
                    this.$message("請求頁面飛到火星去了");
                    break;
            }
            return Promise.reject(error.response);
        }
    }
);

/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function get(url, params = {}) {
    return new Promise((resolve, reject) => {
        axios
            .get(url, {
                params: params
            })
            .then(response => {
                resolve(response.data);
            })
            .catch(err => {
                reject(err);
            });
    });
}

/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.post(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封裝delete請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function deletes(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.delete(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

/**
 * 封裝put請求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
    return new Promise((resolve, reject) => {
        axios.put(url, data).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        );
    });
}

3.api.js

//引用上面的http.js文件
import {get, post, put, deletes } from "@/service/http";
export const getTable = formData => get("news/list", formData);
export const getUserInfo = formData => get("/userlist", formData);
export const addUserInfo = formData => post("/adduser", formData);
export const delUserInfo = id => post(`/delUser/${id}`);
export const updateUserInfo = (param) => post(`/update`,param);

4.table.vue

import { getUserInfo,addUserInfo,delUserInfo,updateUserInfo} from "@/api";  // 調用api 登錄接口


getUserInfo().then((res)=>{
         this.tableData = res;
         this.total = res.length;
       }).catch((err)=>{
           console.log("err==>",err);
       })