Vue+Axios封装接口管理

1.1、为什么要封装axios

      1.axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。

1.2、怎么封装axios

      1.在src目录下新建http文件夹，里面新建request.js文件,在文件里通过三步即可完成封装 

      2.导入axios包以及vant中的Toast组件

      3.创建axios 、baseURL、 以及超时时间   注意：URL是大写

      4.设置请求拦截器 request (可以设置带loading效果+令牌token)  里面有两个回调函数，一个是通过success返回的成功回调函数，另一个是通过error捕获错误信息以Promise.reject返回

      5.设置响应拦截器 response (关闭loading) 在success回调函数中关闭loading 和对数据格式进一步的处理

      6.通过export.default抛出  

import axios from 'axios'
import {Toast} from "vant"

//1 创建axios baseURL 超时时间
const service = axios.create({
    baseURL:"https://api.it120.cc/small4",
    timeout: 5000,
})
//2 请求
service.interceptors.request.use(
    (config) => {
           Toast.loading({//loading
            message: '加载中...',
            forbidClick: true,
            duration:30000,
          });

        return config
    }, (error) => {//捕获错误信息
        return Promise.reject(error)
    })
//3 响应
service.interceptors.response.use(
    (response) => {
        
        Toast.clear()//关闭loading
        return Promise.resolve(response)
    }, (error) => {
        return Promise.reject(error)//对数据进一步处理
    })
//4 抛出
export default service

 下面更完整，有loading,、nprogress、存储方式

import axios from "axios";
import { base_url } from "@/config"; //多环境变量url
import { Loading } from "element-ui"; //loading

// 进度条
import Nprogress from "nprogress";
import "nprogress/nprogress.css";

// 1. 创建axios baseURL 超时时间
const service = axios.create({
  baseURL: base_url, 
  timeout: 10000,
});
// 2. 请求
var loading;
service.interceptors.request.use(
  (config) => {
    Nprogress.start(); //开启进度条

    loading = Loading.service({
      //loading
      text: "加载中...",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.8)",
    });
    // config.headers['Authorization'] = "Bearer" + store.state.token1//将token1存到本地 / 或vuex
    config.headers["Authorization"] = sessionStorage.token;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 3. 响应
service.interceptors.response.use(
  (response) => {
    Nprogress.done(); //1.隐藏进度条
    loading.close(); //关闭loading
    // return response.data  对数据进一步处理
    return Promise.resolve(response);
  },
  (error) => {
    return Promise.reject(error);
  }
);
//4.  抛出
export default service;