如何用vue封装axios详解！

秒速五厘米 2024-04-17 05:33 46阅读 0赞

如何用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);
    })
    }

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