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);
       })