我这里用的是局部引入方式,需要的话也可以在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生命周期执行这个方法就行