axios的二次封装

简介: axios的二次封装

一、axios是什么?

axios 是一个轻量的 HTTP客户端


    基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选


二、axios有哪些特性

(1).从浏览器中创建 XMLHttpRequests

(2).从 node.js 创建 http请求

(3).支持 Promise API

(4).拦截请求和响应

(5).转换请求数据和响应数据

(6).取消请求

(7).自动转换JSON 数据

(8).客户端支持防御XSRF


三、在Vue中如何封装axios

1.在vue项目中安装axios

npm i axios

3b9185295f624c98882ac9b78a6f9019.png


2.新建axios.js文件,导入axios,对axios进行二次封装,分别对请求拦截器和响应拦截器进行二次封装,封装后每次都会监测当前localStorage是否有token,如果有token,则在请求头中携带token发送请求。

import axios from 'axios'
import { toast } from '~/composables/util'
import { getToken } from '~/composables/auth'
import store from '~/store'
const service = axios.create({
    // 设置的基础路径(根路径),每次发送请求只需要写根路径后面的路径即可,会自动添加根路径
    baseURL: '/api'
})
// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        // 往header头自动添加token
        const token = getToken()
        if (token) {
            config.headers['token'] = token
        }
        return config
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error)
    }
)
// 添加响应拦截器
service.interceptors.response.use(
    function (response) {
        // 对响应数据做点什么
        return response.data.data
    },
    function (error) {
        // 对响应错误做点什么
        const msg = error.response.data.msg || '请求失败'
        // token已经失效,依然进行操作,
        if (msg == '非法token,请先登录!') {
            store.dispatch('logout').then((res) => {
                location.reload()
            })
        }
        toast(error.response.data.msg || '请求失败', 'error')
        return Promise.reject(error)
    }
)
export default service

ca1c822cd6094d72b38d1b0b470641c8.png



3.在vite.config.js文件中配置代理,解决跨域问题


相当于配置 /api 就是 下面接口的访问路径 http://ceshi13.dishait.cn

    server: {
        proxy: {
            '/api': {
                target: 'http://ceshi13.dishait.cn',
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api/, '')
            }
        }
    },

4.在vue文件中直接导入创建的axios文件,发送数据请求

<script setup>
import axios from '~/axios.js'
axios.get('/admin/statistics1').then(res => {
    console.log(res);
})
</script>

最终请求到的数据如下


9f4ac12ca2d14e74b182b242a9eb92a3.png


四、为什么要进行封装

axios 的 API 很友好,你完全可以很轻松地在项目中直接使用。


    不过随着项目规模增大,如果每发起一次HTTP请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍


     这种重复劳动不仅浪费时间,而且让代码变得冗余不堪,难以维护。为了提高我们的代码质量,我们应该在项目中二次封装一下 axios 再使用


目录
相关文章
|
2月前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
31 0
|
17天前
|
JavaScript
vue对axios封装
vue对axios封装
20 2
|
8天前
|
前端开发
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
网页设计,若依项目修改(It must be done)02------axios封装后发get请求,axios请求的位置在呢?
|
2月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
2月前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
2月前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
101 0
|
2月前
axios封装和配置
axios封装和配置
34 0
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
资源调度 JavaScript API
|
2月前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
38 0