vue开发中关于axios的封装过程

 更新时间:2022年08月03日 09:50:59   作者:前端@小菜  
这篇文章主要介绍了vue开发中关于axios的封装过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

关于axios的封装

下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios 实例:

import axios from 'axios'
import { BASE_URL } from './http'
import router from '../router'
 
// create an axios instance
const service = axios.create({
  baseURL: BASE_URL, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests(是否支持跨域)
  timeout: 5000 // request timeout(超时时间)
})
 
// request interceptor(请求拦截器)
service.interceptors.request.use(
  config => {
    // do something before request is sent
    return config
  },
  error => {
    // do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// response interceptor(响应拦截器)
service.interceptors.response.use(
  response => {
    const res = response.data
    return res
  },
  error => {
    if (error.response) {
      // console.log('err' + error) // for debug
      switch (error.response.status) {
        // 不同状态码下执行不同操作
        case 401:
          router.push('/login')
          break
        case 404:
          break
        case 500:
          break
        default:
      }
    }
    return Promise.reject(error)
  }
)
 
export default service

封装 api:

import request from '../base/request'
 
export function basedata(params) {
  return request({
    url: '/user/basedata',
    method: 'GET',
    params
  })
}

这里参数用的 params,它是拼接在 url 中的。还有一个参数 data,传递的数据格式为对象。

import request from '../base/request'
 
export function basedata(data) {
  return request({
    url: '/user/basedata',
    method: 'POST',
    data
  })
}

 然后我们就只需引入封装好的 api 进行调用即可。

另外,如果请求超时需要自动重新获取数据,可参考我的另一篇文章:解决 axios: “timeout of 5000ms exceeded”超时的问题

vue中axios全局封装

axios封装

import axios from 'axios'
import Qs from 'qs'
import VueCookies from 'vue-cookies';
// const {set, get, isKey } = VueCookies
// const AUTH_TOKEN = 1
const axiosInstance = axios.create({
    baseURL: '域名',
    headers: {
        // 'Authorization': AUTH_TOKEN,
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    transformRequest: [function(data, headers) {
        if (headers['Content-Type'].includes('application/x-www-form-urlencoded')) {
            if (data instanceof(FormData || URLSearchParams)) return data;
            else return Qs.stringify(data);
        } else if (headers['Content-Type'].includes('application/json')) return JSON.stringify(data)
    }]
})
export default axiosInstance
axiosInstance.interceptors.request.use(function(config) {
    // 在发送请求之前做些什么
    if (VueCookies.isKey('Authorization')) {
        config.headers.Authorization = VueCookies.get('Authorization')
    }
    return config;
}, function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
axiosInstance.interceptors.response.use(function(response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data
}, function(error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

api的统一管理

import axiosInstance from "../axios";
export function EmailCode(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        headers: {
            'smskey': 'smskey'
        },
        data
    })
}
export function userRegister(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        data
    })
}
export function userLogin(data) {
    return axiosInstance({
        method: 'post',
        url: 'url',
        data
    })
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • VUE3使用JSON编辑器方式

    VUE3使用JSON编辑器方式

    这篇文章主要介绍了VUE3使用JSON编辑器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 关于elementUI select控件绑定多个值(对象)

    关于elementUI select控件绑定多个值(对象)

    这篇文章主要介绍了关于elementUI select控件绑定多个值(对象),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue3 name 属性的使用技巧详解

    vue3 name 属性的使用技巧详解

    这篇文章主要为大家介绍了vue3 name 属性的使用技巧详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vuex的几个属性及其使用传参方式

    vuex的几个属性及其使用传参方式

    这篇文章主要介绍了vuex的几个属性及其使用传参,本文结合实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue关闭开发模式提示的简单解决办法

    vue关闭开发模式提示的简单解决办法

    Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下
    2024-04-04
  • Vue实现hash模式网址方式(就是那种带#的网址、井号url)

    Vue实现hash模式网址方式(就是那种带#的网址、井号url)

    这篇文章主要介绍了Vue实现hash模式网址方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue基于NUXT的SSR详解

    Vue基于NUXT的SSR详解

    这篇文章主要介绍了Vue基于NUXT的SSR详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 基于Vue uniapp实现贪吃蛇游戏

    基于Vue uniapp实现贪吃蛇游戏

    贪吃蛇游戏想必是很多70、80后的回忆,一直到现在也深受大家的喜欢。本文将利用Vue+uniapp实现这一经典的游戏,感兴趣的可以了解一下
    2022-04-04
  • vue大数据表格卡顿问题的完美解决方案

    vue大数据表格卡顿问题的完美解决方案

    这篇文章主要给大家介绍了基于vue大数据表格卡顿问题的完美解决方案,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • vue动画—通过钩子函数实现半场动画操作

    vue动画—通过钩子函数实现半场动画操作

    这篇文章主要介绍了vue动画—通过钩子函数实现半场动画操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论