简单的封装axios

简单的封装axios

现在项目中下载axios 跟qs模块
然后在src目录下创建一个api文件夹，里面创建一个index.js文件 代码如下：

import axios from "axios"
import qs from "qs"
import { Loading } from 'element-ui';
// 配置公共地址
axios.defaults.baseURL="";
// 请求超时时间
axios.defaults.timeout=5000;
// 公司用的是token的话可以加
// axios.defaults.headers.common['token']=token;
// 添加请求拦截器
var loadings;
axios.interceptors.request.use(function (config) {
    // 每次ajax获取数据之前开启loading弹窗
    loadings=Loading.service();
    if(config.method.toLowerCase()=='post'){
        config.data=qs.stringify(config.data)
    }
    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
  }

然后在main.js中引入
然后在放到vue实例中

import ajaxs from "./api/index"
Vue.prototype.$http=ajaxs; //this.$http 执行ajax请求

如下图：
api/index.js

main.js