vue 封裝api請求

1.新建js文件 http.js

import axios from "axios";
import QS from "qs"; //引入qs模塊,用來序列化post類型的數據
import Vue from "vue";
//環境的切換
if (process.env.NODE_ENV == "development") {
    // axios.defaults.baseURL = "";//正式
    //   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 = 30000;
let type = app - type
//post請求頭的設置
axios.defaults.headers.post["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";
axios.defaults.headers.put["Content-Type"] =
    "application/x-www-form-urlencoded;charset=UTF-8";
axios.defaults.headers.delete["Content-Type"] =
    "Access-Control-Allow-Origin";
// axios.defaults.headers.common['app-type'] = 'wxapp'
// // 請求攔截器

axios.interceptors.request.use(
    config => {
        if (localStorage.getItem("access_token")) {
            config.headers.Authorization = localStorage.getItem("access_token");
            //   config.headers.common['app-type'] = 'wxapp'
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    }
);
// 響應攔截器
axios.interceptors.response.use(
    response => {
        // 如果返回的狀態碼為200，說明接口請求成功，可以正常拿到數據
        // 否則的話拋出錯誤
        let that = this
       
        if (response.status) {
            if (response.data.errorCode == 10001 || response.data.errorCode == 10040) {
              
                Vue.prototype.$message({
                    type: "error",
                    message: "登錄已過期，請重新登錄"
                });
                // 清除token
                localStorage.removeItem("token");   
                setTimeout(() => {
                    location.href = '#/login'
                }, 1000);
                return Promise.reject(response);
            }
            else if (response.data.errorCode == 10004) {
                Vue.prototype.$message({
                    type: "error",
                    message: "賬號或密碼錯誤"
                });
                return Promise.reject(response);

            }
            console.log(response)
            return Promise.resolve(response);

        } else {

            return Promise.reject(response);
        }
    },
    error => {
        if (error.request.status == 401) {
            Vue.prototype.$message({
                type: "error",
                message: "登錄已過期，請重新登錄"
            });
            localStorage.removeItem("token");
            setTimeout(() => {
                location.href = '#/login'
            }, 1000);
        }
        if (error.request.status == 404 && JSON.parse(error.request.response).msg == '賬戶不存在') {
            Vue.prototype.$message({
                type: "error",
                duration:1000,
                message: JSON.parse(error.request.response).msg
            });
        }
    }
);

/**
 * post方法，對應post請求
 * @param {String} url [請求的url地址]
 * @param {Object} params [請求時攜帶的參數]
 */
export default function request(api, method = "GET", data) {
    return new Promise((resolve, reject) => {
        if (method == 'post' || method == 'POST') {
            axios
                .post(api, QS.stringify(data))
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data);
                });
        } else if (method == 'GET' || method == 'get') {
            axios
                .get(api, { params: data })
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data);
                });
        }
        else if (method == 'put' || method == 'PUT') {
            axios
                .put(api, QS.stringify(data))
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data);
                });
        }
        else if (method == 'del' || method == 'delete' || method == 'Del' || method == 'Delete') {
            axios
                .delete(api, { params: data })
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err.data);
                });
        }
    })
}

2. main.js

import http from "./request/http.js"
Vue.prototype.request=http

3 調用

 // api=> 地址  get->方法 data=>參數
this.request(api,'get',data).then(res=>{
        console.log(res)
      })