VUE封装网络请求异步函数方式（个人笔记）

代码

http.js(封装请求)包括获取url参数和当前时间

先引入axios和qs依赖

import axios from 'axios';
import router from '../../router';
import qs from "qs";
import VueCookie from 'vue-cookie'
axios.defaults.timeout = 10000; //请求超时10秒
axios.defaults.baseURL = ''; //请求测试环境base url
// 用到session验证码功能，让请求携带cookie，可以加上以下一行
axios.defaults.withCredentials = true
//http request 拦截器
axios.interceptors.request.use(
  config => {
        let token = VueCookie.get('token')
        if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
            // config.headers = {
            //     'X-token': token
            // }
            config.headers['token'] = token
        }
        return config
    },
    err => {
        return Promise.reject(err)
    }
)

// 拦截器
axios.interceptors.response.use(
    response => {
        if (response.data.code === 4003) {
            Toast({
                mes: '您没有权限操作！',
                timeout: 1500,
                callback: () => {
                    router.go(-1);
                }
            });

            return false;
        }
        if (response.data.code === -1) {
            localStorage.removeItem('token')
        }
        return response
    },
    err => {
        if (err.code === 'ECONNABORTED' && err.message.indexOf('timeout') !== -1) {
            Toast({
                mes: '网络异常，连接超时...',
                timeout: 1500
            });
        }
        return Promise.reject(err)
    }
)

// get请求
export function get(url, params = {}, headers = {}) {
    return axios.get(url, {
        params: params,
        headers: headers
    }).then(response => {
        return response.data
    }).catch(err => {
        console.log(err)
    })
}

// post请求
export function post(url, params = {}) {
    return axios.post(url, params)
        .then(response => {
            return response.data
        }, err => {
            console.log(err)
        })
}

// postForm请求
export function postForm(url, params = {}) {
    return axios.post(url, qs.stringify(params))
        .then(response => {
            return response.data
        }, err => {
            console.log(err)
        })
}
// 封装获取地址栏参数

export function getURLParame(str) {
    var reg = new RegExp("(^|&)" + str + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 封装获取当前系统时间
export function getDate() {
    let getD = new Date()
    let y = getD.getFullYear() + ''
    let mm = getD.getMonth() + 1
    if (mm.length < 2) {
        mm = '0' + mm
    }

    let d = getD.getDate() + ''
    if (d.length < 2) {
        d = '0' + d
    }
    let h = getD.getHours() + ''
    if (h.length < 2) {
        h = '0' + h
    }

    let m = getD.getMinutes() + ''
    if (m.length < 2) {
        m = '0' + m
    }
    return y + '-' + mm + '-' + d + ' ' + h + ':' + m
}

router.js（请求路由）

import { post, get, postForm, getURLParame,getDate } from './https'
const req = { 
    // 登录 
    login: async (params) => { 
        let data = await post("/login", params)  
        return data 
    },  
    // 当前时间 
    getDate: getDate()
}
export default req

vue页面调用(单独.全局可以挂载)

import req from "../../utils/router";
// 测试请求发起 声明在methods里面
async testFunSend() {
    const me = this;
    let dataJson = await req.login(me.params); 
    me.data = dataJson.data;    
},
//最后在created生命周期执行这个方法就行