vue封装axios的api(备份前端网)

只是一个小模板，需要什么后续去根据业务添加
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这篇写法