vue axios 封装以及api 统一管理

import axios from "axios" ;
import { Loading } from 'element-ui';
import qs from "qs"
axios.defaults.baseURL = "http://59.110.138.169"
axios.defaults.timeout = 5000;
var loadings ;
// request 是请求服务器执行的拦截函数
axios.interceptors.request.use(function (config) {
    console.log(config,333)
    if(config.method == "post"){
        config.data = qs.stringify(config.data)
    }
    loadings =  Loading.service();
    return config;
}, function (error) {
    // 对请求失败做处理
    return Promise.reject(error);
});
axios.interceptors.response.use(function (config) {
    loadings.close();
    return config;
}, function (error) {
    loadings.close();
    return Promise.reject(error);
});
export default axios

axios

htttp.js

// 引入封装好的axios
import request from '@/api/request'

//获取用户列表
function doLogin(data){
  return request ({
    url: '/admin/login/doLogin',  
    method:'post',  
    data  
  })
}

function getUserInfo(data){
    return request ({
      url: '/admin/login/getUserInfo',  
      method:'get',  
      data  
    })
  }
  function doLogOut(data){
    return request ({
      url: '/admin/login/doLogOut',  
      method:'get',  
      data  
    })
  }

export default {
    doLogin,
    getUserInfo,
    doLogOut
}

url.js

export default {
    imgCode: '/admin/login/imgCode',
    // host:'http://localhost',
    uploadUrl: 'http://59.110.138.169',
    host:'http://59.110.138.169'
}

vue axios 封装以及api 统一管理_第1张图片

页面引用

import http from "../api/index";

import url from '../api/url'

  
      
    


data() {
    return {
      url
    };
  },
created() {
    this.init();
  },
  methods: {
    init() {
      http.list().then(res => {
        this.swiperArr = res.data.banner.slice(0, 4);
      });
    }
  }

 

你可能感兴趣的:(vue axios 封装以及api 统一管理)