Axios二次封装究极版

\

一.axios的基本使用

1.1 下载axios

npm install axios -S

1.2  main.js全局引入

import axios from 'axios'

// 全局挂载axios
app.config.globalProperties.$axios = axios

1.3 axios调用接口

//Vue3中使用axios调用接口试例

#定义一个响应式数组
const swiperList = ref([])

#定义一个方法,异步调用
const swiperTest = async() => {
   try {
     // 全局调用
     cosnt res = await proxy.$axios.get('/swiper', {`${传递的参数}`})
     // 普通调用 get
     const res = await axios.get('/swiper',{ params: {`${get请求params传参}`}})
     // 普通调用 post
     const res = await axios.post('/swiper',{ data: `${post请求data传参}`})
     // 赋值接口数据
     proxy.swiperList = res.swiperList
   }catch(error) {
     // 处理异常
     console.log(err)
   }
}

#调用该方法
swiperTest()

#导出响应式变量
return {
    swiperList,
    swiperTest
}

二.axios二次封装通用版

2.1 request.js

import axios from 'axios'

const service = axios.create({
    baseURL:'https://book.youbaobao.xyz:18082',
    timeout:10000,
})

service.interceptors.response.use((res) => {
    const { status, data, msg } = res
    if(status === 200 ) {
        return data
    }else{
        return Promise.reject(msg)
    }
})

export default service

2.2 api统一管理

import request from "../utils/request";

export const screen = () =>  {
  return request({
    url: "/screen/data",
    method: "get",
  });
}

export const clound  = () =>  {
  return request({
    url: "/screen/wordcloud",
    method: "get",
  });
}

2.3 接口调用

<script>
import { clound } from '../api'
export default {
  name: 'Home',
  data() {
    return {
    }
  },
  mounted() {
    this.getClound()
  },
  methods: {
    async getClound() {
      const data = await clound()
      localStorage.isClound = JSON.stringify(data)
      console.log(data);
      this.$store.commit('changeCloundInfo', {
        data
      });
    },
  }
}
</script>

三.axios二次封装完整版

3.1 结合Mock API统一封装

/**
 * axios二次封装（根据自己需求而定）
 */
import axios from 'axios'
import config from './../config'
import { ElMessage } from 'element-plus'
import router from './../router'
import storage from './storage'

const TOKEN_INVALID = 'Token认证失败，请重新登录'
const NETWORK_ERROR = '网络请求异常，请稍后重试'

// 创建axios实例对象，添加全局配置
const service = axios.create({
    baseURL: config.baseApi,
    timeout: 8000
})

// 请求拦截
service.interceptors.request.use((req) => {
    const headers = req.headers;
    const { token = "" } = storage.getItem('userInfo') || {};
    if (!headers.Authorization) headers.Authorization = 'Bearer ' + token;
    return req;
})

// 响应拦截
service.interceptors.response.use((res) => {
    const { code, data, msg } = res.data;
    if (code === 200) {
        return data;
    } else if (code === 500001) {
        ElMessage.error(TOKEN_INVALID)
        setTimeout(() => {
            router.push('/login')
        }, 1500)
        return Promise.reject(TOKEN_INVALID)
    } else {
        ElMessage.error(msg || NETWORK_ERROR)
        return Promise.reject(msg || NETWORK_ERROR)
    }
})
/**
 * 请求核心函数
 * @param {*} options 请求配置
 */
function request(options) {
    options.method = options.method || 'get'
    if (options.method.toLowerCase() === 'get') {
        options.params = options.data;
    }
    let isMock = config.mock;
    if (typeof options.mock != 'undefined') {
        isMock = options.mock;
    }
    if (config.env === 'prod') {
        service.defaults.baseURL = config.baseApi
    } else {
        service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
    }

    return service(options)
}

['get', 'post', 'put', 'delete', 'patch'].forEach((item) => {
    request[item] = (url, data, options) => {
        return request({
            url,
            data,
            method: item,
            ...options
        })
    }
})

export default request;

3.2 接口统一处理

/**
 * api管理
 */
 import request from './../utils/request'
 export default {
    swiper(params){
         return request({
             url:'/swiper',
             method:'post',
             data: params,
             mock: false
         })
    },
    noticeCount(){
        return request({
            url:'/leave/count',
            method:'get',
            data:{},
            mock:true
        })
    },
    MenuList(){
        return request({
            url:'/menu/list',
            method:'get',
            data:{},
            mock:false
        })
    },
    leaveApprove(params) {
        return request({
            url: '/leave/approve',
            method: 'post',
            data: params,
            mock: false
        })
    }
 }

3.3 接口调用

//Vue3中对axios二次封装调用接口试例

#定义一个响应式数组
const swiper = ref([])

#定义一个方法,异步调用
const swiperTest = async() => {
   try {
     cosnt { swiperList } = await swiper('/swiper')
     proxy.swiperList = swiperList
   }catch(error) {
     console.log(err)
   }
}

#调用该方法
swiperTest()

#导出响应式变量
return {
    swiper,
    swiperTest
}