在写项目的时候, 对axios库的二次封装是必不可少的, 可以较大程度的优化代码, 我会讲讲在vue中封装如何axios
这里是axios中文文档的链接: www.axios-js.com/zh-cn/docs/
首先第一步, 依旧是下包 axios , 使用 pnpm i axios 或者 npm i axios都可以
当vue的package.json文件中有了axios的依赖之后, 便是下载完成 如下
接下来创建一个工具包文件夹 uilts ,在它的下面再创建一个 request.js文件如下
如果想要有和我一样的图标, 可以安装插件 vscode-icons 插件 它可以帮助你更好的区分不同的文件, 方便管理
接下来是正式的封装了, 首先, 引入axios
import axios from 'axios'
接下来, 创建一个axios的实例对象, 避免直接使用aixos进行发送请求, 会对axios造成污染
const request = axios.create()
在创建实例对象的时候, 可以对其进行一些配置, 可以传入一个配置对象
axios.create({ baseURL: '基地址' // 这里可以进行基地址的配置 timeout: 1000 //这里设置请求超时的时限, 值为毫秒内型 })
设置完配置对象之后, 可以为它添加请求拦截器和响应拦截器, 在项目开发中, 这一步是必不可少的, 根据不同的情况发送情况, 需要进行不一样的处理, 比如说在请求拦截器中携带上项目必要的token, 或者在响应拦截器中, 处理不同类型的错误, 现在开始创建, 用上面定义的实例对象, 进行配置
最后导出request就ok了 export default request
