vue3如何封装axios
本文小编为大家详细介绍“vue3如何封装axios”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue3如何封装axios”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。
简介
axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染
还是在前面的示例项目上操作,安装axios最新0.27.2版本
cd HELLO-WORLDnpm install axios
openapi
在网上找到一个开放的openapi地址,免费且无需认证就可以使用
方便开发时模拟接口数据,但不能使用在生产环境中
该openapi返回json数据,比较符合我们的需求, 这里直接写死到axios配置中
基本配置
axios配置项较多,这里只配置基本功能
在class="lazy" data-src目录下创建utils文件夹,然后创建request.js文件
import axios from 'axios'//自动加在url前面axios.defaults.baseURL = 'https://api.apiopen.top'//超时时间 axios.defaults.timeout = 5000//跨域凭证axios.defaults.withCredentials = false//响应和请求 拦截器配置export default axios
拦截器
axios拦截器分为 请求拦截和响应拦截
请求拦截器可以在请求时设置token,header等等
响应拦截器可以在收到数据后进行逻辑判断
请求拦截器配置
axios.interceptors.request.use(config => { console.log(config) return config}, error => { Promise.reject(error)})
响应拦截器配置
axios.interceptors.response.use(res => { if (typeof res.data !== 'object') { ElMessage.error('返回数据不是对象!') return Promise.reject(res) } if (res.data.code !== 200 ){ ElMessage.error('返回码不等于200') } return res.data}, error => { ElMessage.error('网络异常') Promise.reject(error)})
api请求
在class="lazy" data-src目录创建api文件夹,在api目录中创建openapi.js 文件
创建一个getImages方法来 获取 openapi的图片数据
该方法指定请求get方法,传入url和参数
import request from '../utils/request'export function getImages(params) { return request.get('/api/getImages', { params })}
数据渲染
在components目录创建一个table.vue的组件,路由配置见前一章
引入openapi,因为是js组件,不需要在vue页面显示声明,直接使用
在页面创建时调用请求数据方法,页面加载完成既可在页面上看到数据
<template><div> <div> <p>this is imagesdata: {{ imagesData }}</p> </div></div></template><script>import { getImages } from '@/api/openapi'export default { name: 'Table', data() { return { imagesData: null, queryData: { page: 0, size: 10, } } }, created() { this.fetchData(); }, methods: { fetchData() { getImages(this.queryData).then( (res) => { this.imagesData = res.result }).finally( () => { console.log(this.imagesData) }) } } }</script>
效果如下
读到这里,这篇“vue3如何封装axios”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341