axios的基础封装

1.安装axios

npm install axios

2.在scr目录下创建一个文件夹，eg:api/http

3.在api文件夹下创建2个.js 

4.index.js

import axios from 'axios';

import { ElLoading ,ElMessage} from 'element-plus'



 
const loading = {
  loadingInstance: null, //loading实例
  // 打开加载
  open: function () {
    // 创建实例，而且会加载窗口
    if (this.loadingInstance === null) {
      //采用单例
      this.loadingInstance = ElLoading.service({
        target: '.main',
        text: '拼命加载中'
      });
    }
  },
 
  // 关闭加载
  close: function () {
    // 不为空时，则关闭加载窗口
    if (this.loadingInstance !== null) {
      this.loadingInstance.close();
    }
    this.loadingInstance = null;
  }
};
const  ajax=axios.create({//自定义axios对象
    baseURL:"https://lianghj.top:8888/api/private/v1/",//基地址
    timeout:3000,
   
})

// 请求拦截器
ajax.interceptors.request.use(
  (config) => {
    // 请求拦截
    // 打开加载窗口
    loading.open();
    // 请求携带token
    const token= config.headers.Authorization=window.localStorage.getItem('token');
    return config;
  },
  (error) => {
    // 关闭加载窗口
    loading.close();
    return Promise.reject(error);
  }
);
 
// 响应拦截器
ajax.interceptors.response.use(
  (response) => {
    // 响应拦截
    // 关闭加载窗口
    loading.close();
 
    // const resp = response.data;
    // 后台正常响应的状态，如果不是2000，说明后台处理有问题
    // if (resp.meta.status!== 200) {
    //   ElMessage({
    //     message: '系统异常',
    //     type: 'warning',
    //     duration: 5 * 1000
    //   });
    // }
    return response;
  },
  (error) => {
    // 关闭加载窗口
    loading.close();
 
    //断网会出现这样的错误 |请求路径错误
// 当请求接口出错时, 进行弹出错误提示, 如 404, 500, 请求超时
// console.log('response error', error.response.status) 
// ElMessage({
//       message: error.message,
//       type: 'error',
//       duration: 5 * 1000
//     });
//     return Promise.reject(error);
  }
);
 



   
  
export default ajax

api.js

需注意（post接口的参数是data）

import ajax from '@/api/index'

export const Login = data => {
    return ajax({
        url: '/login',
        method: 'post',
        data

    })
};
// user列表
export const Users= params => {
    return ajax({
        url: '/users',
        method: 'get',
        params
        
    })
};