axios的二次封装-阿里云开发者社区

axios的二次封装

2023-08-22 91

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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

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

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>

最终请求到的数据如下

四、为什么要进行封装

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

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

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