axios 的二次封装

八戒滴花衬衫

已于 2022-09-21 10:57:01 修改

阅读量445

点赞数

文章标签： javascript 前端开发语言

于 2022-09-21 10:40:03 首次发布

本文链接：https://blog.csdn.net/weixin_69573955/article/details/126956749

版权

本文探讨了axios进行二次封装的原因，包括提高代码重用性、统一处理HTTP错误以及实现请求和响应的拦截。通过封装，可以简化配置，预先处理数据，如获取token。详细步骤包括npm或yarn安装axios，然后在项目中创建http文件夹，内含api.js和axios.js，用于定义和封装请求接口，最后在组件中便捷调用。

摘要由CSDN通过智能技术生成

一.首先让我们了解一下为什么要对axios进行二次封装？

1，代码封装，重用性高，减少代码量，减低维护难度。

2，统一处理一些常规的问题一劳永逸，如http错误。

3，拦截请求和响应，提前对数据进行处理，如获取token，修改配置项。

安装axios

npm下载

npm install axios

yarn 下载

yarn add axios

下载完成之后在main.js中全局引入

import axios from 'axios'
Vue.prototype.$axios = axios

在src下创建出一个新的文件夹 http

1.在http文件夹下创建一个新的api.js文件

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";


//2. 利用axios对象的方法create,去创建一个axios实例
//requests就是axios,只不过稍微配置一下

const api = axios.create({
    //基础路径
    baseURL: '', // 所有请求的公共地址部分
    timeout: 3000 // 请求超时时间,这里的意思是当请求时间超过5秒还未取得结果时,