VUE使用异步方法封装网络请求(个人笔记)

141 阅读1分钟

我这里用的是局部引入方式,需要的话也可以在main.js全局引入

http.js(封装请求)

import axios from 'axios';import router from '../router';import qs from "qs";axios.defaults.timeout = 10000; //请求超时10秒// Paths// axios.defaults.baseURL = '/Execution.aspx'; //请求base urlaxios.defaults.baseURL = '/user'; //请求base urlaxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //设置post请求是的header信息// 用到session验证码功能,让请求携带cookie,可以加上以下一行axios.defaults.withCredentials = true//http request 拦截器axios.interceptors.request.use(    config => {        let token = sessionStorage.getItem('token')        if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token            config.headers = {                'X-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 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, 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";

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