如何用vue封装axios详解！

如何用vue封装axios

该项目需要在登录之前添加验证码，为了更加方便请求接口的区分，可以封装两个请求接口，一个登录之前需要请求的接口，一个为登录之后请求的接口，使之互不干扰。
1.登录前设置一个文件夹axios,其中的index.js写请求的接口，config.js写配置

index.js

/*接口文件*/
//axios配置文件
import index from './config'

export default {
    API_VERIFY: (params) => index('get', '/login/getverify?', params),//验证码

    API_LOGIN: (body ) => index('post','login/index?' ,body),//登录
   
}

 config.js

import axios from 'axios'
import index from './index'

const instance = axios.create({
    //默认地址
    baseURL: 'http://192.168.10.26/v1',
    //响应时长
    timeout: 6000
})

//请求拦截器
instance.interceptors.request.use(
    /**
     * @param config    传入的url以及参数
     */
    (config) => {
        axios.defaults.headers['Content-Type'] = 'Access-Control-Allow-Origin'
        // console.log("发送请求",config)
        return config
    },
    (error) => {
        console.log("发送请求失败")
        return Promise.reject(error)
    }
)

//响应拦截器
instance.interceptors.response.use(
    (response) => {
        // console.log("响应成功",response)
        return response.data
    },
    (error) => {
        console.log("响应失败",error.response)
        return Promise.reject(error)
    }
)
/**
 * @param {请求方式} method 
 * @param {请求地址} path 
 * @param {请求参数} params
 */
export default function (method, url, params) {
    method = method.toLowerCase()
    switch (method) {
        case 'get':
            params = params || ''
            return instance.get(url + params)
        case 'post':
            params = params || null
            return instance.post(url,params)
        default:
        console.error('未知的method:'+method)
        return false
    }
}

2.登录后设置一个文件夹request,其中的api.js写请求的接口，http.js写配置

http.js

import axios from 'axios'
import router from 'vue-router'
import {
  Loading,
  Message
} from 'element-ui'
var instance = axios.create({
  baseURL: 'http://192.168.10.26/v1',
  timeout: 6000,
})
var access_token = localStorage.getItem("token");
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  access_token = localStorage.getItem("token");
  // console.log(access_token)
  if (access_token) {
    config.headers.Authorization = `${access_token}`;
  }  
    return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
 
// http请求拦截器
var loadinginstace = "";
instance.interceptors.request.use(config => {
  loadinginstace = Loading.service({
    fullscreen: true
  })
  return config
}, error => {
  loadinginstace.close();
  Message.error({
    message: '加载超时'
  })
  return Promise.reject(error);
})
// http响应拦截器
instance.interceptors.response.use(data => { // 响应成功关闭loading
  loadinginstace.close();
  //  console.log(data)
  return data
}, error => {
  const {
    code
  } = error;
  if (code == 'ECONNABORTED') {
    loadinginstace.close();
    Message.error({
      message: '网络超时，请重新请求'
    })
    return Promise.reject(error);
  }
  const {
    status
  } = error.response; //在response中有一个status 我们用es6的方式解构出来
  if (status == 401) {
    //后台定义401为token过期
    // alert('请重新登录!');
    loadinginstace.close();
    //  如果token过期了;我们应该清token
    localStorage.removeItem("token");
    localStorage.removeItem("nickname");
    localStorage.removeItem("avatarImg");
    localStorage.removeItem("mobile");
    //   清楚后让它跳转到登录页面去
    location.href = "/Login";
  } else {
    alert('系统繁忙！');
  }
  
  loadinginstace.close();
  Message.error({
    message: '加载失败'
  })
  return Promise.reject(error)
})

export const get = (url, query) => {
  query = query || '';
  return instance.get(url + query)
}
export const post = (url, query) => {
  return instance.post(url, query)
}

api.js

import { get, post } from './http'

export default {
    GET_GRADES:(obj)=>get('/schoolcls/getgrades?',obj),
    
    CLASS_MANAGE:(query,body)=>post('/schoolcls/index?'+query,body),
 
} 
 
 

3.在main.js引入

import api from './request/api'
import index from './axios/index'

Vue.prototype.$api = api
Vue.prototype.$index = index

4.在需要请求接口的页面调用

(1)登录前

如:登录页面login.js

//登录前
submitForm(){

 this.$index.API_LOGIN(obj).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err);
})

}

(2)登录后

如：其中一登录后页面

//登录后子页面
getdata(){
this.$api.GET_GRADES().then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
}

实战结论，写得不好的地方请轻喷~有好的建议也可以评论告诉下~谢谢大家!