只是一个小模板,需要什么后续去根据业务添加
api/request.js
import axios from 'axios' const instance = axios.create({ baseURL: "www.bai.com/", timeout: 1000, }) // 添加请求拦截器 instance.interceptors.request.use(function (config) { // 在发送请求之前做些什么 // console.log('我是拦截器',config) return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(function (response) { // 对响应数据做点什么 // console.log('我是响应器',response) return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); }); /** * 封装get方法 * @param url * @param data * @returns {Promise} */ export function fetch(url,params={}){ return new Promise((resolve,reject) => { instance.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)=>{ instance.post(url,data) .then(response=>{ // console.log("我是封装的",response.data); resolve(response.data) },err=>{ reject(err) }) }) } export default instance
main.js
import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false import {post,fetch,patch,put} from './api/request' //定义全局变量 Vue.prototype.$post=post; Vue.prototype.$fetch=fetch; /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
具体页面实现中的看es6/es7的promise这篇写法