欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

简单的封装axios

程序员文章站 2022-04-19 19:37:43
...

简单的封装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
简单的封装axios

main.js
简单的封装axios