位置: IT常识 - 正文

Vue3 中 axios 的安装及使用(vue3+antd)

编辑:rootadmin
Vue3 中 axios 的安装及使用 目录前言:一、什么是 axios ?二、Axios 的配置项三、Axios 的请求方式四、自定义创建实例五、Axios 请求错误处理六、Axios 解决跨域问题七、Axios 请求案例随机笑话大全总结:前言:

推荐整理分享Vue3 中 axios 的安装及使用(vue3+antd),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3+antd,vue3.0 antd,vue安装使用axios,vue3 ant,vue3+antd,vue anxios,vue anxios,vue3.0使用axios,内容如对您有帮助,希望把文章链接给更多的朋友!

在编写vue里的项目时,必须要用和后台进行合作,我们始终绕不开对 axios 的使用 ,vue3 中 axios 进行了一些重要的更新,在这里分享给大家

一、什么是 axios ?

Axios 是一个基于 promise 网络请求库,作用于 node.js 和浏览器中 Axios 在服务端它使用原生 node.jshttp 模块,而在客户端(浏览端)则使用 XMLHttpRequests Axios 可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据 Axios 安装方式:npm install axios

二、Axios 的配置项

这些是创建请求时最常用的配置选项;详细的配置项请前往 Axios 官网

提示:

只有 url 是必需的;如果没有指定 method,则请求将默认使用 GET 方法

{ url: '/user', // 请求的服务器地址 URL method: 'GET', // 请求方式,默认值 GET baseURL: 'https://some-domain.com/api/', // 如果 url 不是绝对地址,则会发送请求时在 url 前方加上 baseURL headers: {'X-Requested-With': 'XMLHttpRequest'}, // 自定义请求头 params: { ID: 12345 }, // 与请求一起发送的 URL 参数 data: { firstName: 'Fred' }, // 作为请求体被发送的数据,仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法 timeout: 1000, // 请求超时的毫秒数,如果请求时间超过 `timeout` 的值,则请求会被中断,默认值是 `0` (永不超时), responseType: 'json', // 期望服务器返回的数据类型,选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream', 浏览器专属:'blob',默认值 json // 允许在向服务器发送前,修改请求数据,它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法 transformRequest: [function (data, headers) { return data; // 对发送的 data 进行任意转换处理 }], // 在传递给 then/catch 前,允许修改响应数据 transformResponse: [function (data) { return data; // 对接收的 data 进行任意转换处理 }]}三、Axios 的请求方式Vue3 中 axios 的安装及使用(vue3+antd)

为了方便起见,已经为所有支持的请求方法提供了别名

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])注意:

在使用别名方法时,url、method、data 这些属性都不必在config中指定

// 发送一个 GET 请求axios( '/example-url/……', // 请求地址 { /* 请求体中的参数 */ }, { method: 'GET', // 请求方式,可省略不写 // …… 其他配置 …… })// 发送一个 POST 请求axios( '/example-url/……', // 请求地址 { /* 请求体中的参数 */ }, { method: 'POST ', // 请求方式 // …… 其他配置 …… })四、自定义创建实例

axios.create([config]):调用create函数传入自定义配置,来创建自定义axios实例

// src/request/axiosInstance .jsimport axios from 'axios'const request = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'}})export default request使用自定义实例发送请求:// 方法一:import request from '@/request/axiosInstance.js'request({ method: 'POST', // 请求方式 url: '/example-url/……', // 请求地址 // …… 其他配置 ……})// 方法二:import request from '@/request/axiosInstance.js'request('/example-url/……', // 请求地址 { method: 'POST', // 请求方式 // …… 其他配置 …… })// 方法三:import request from '@/request/axiosInstance.js'request.post( '/example-url/……', // 请求地址 { /* 请求体中的参数 */ }, {/* …… 其他配置 …… */})五、Axios 请求错误处理

发送请求后,使用 .catch(error => {}) 来处理此次请求异常,请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围

axios({ method: 'GET', // 请求方式 url: '/example-url/……', // 请求地址}).catch(error => { console.log('请求失败!')})六、Axios 解决跨域问题跨域:指的是浏览器不能执行其他网站的脚本;它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源,如果未处理跨域访问则会在请求时控制台出现 Access-Control-Allow-Origin…… 的报错信息如何处理跨域问题,可在 vite 项目的 vite-config.js 文件中添加 proxy 代理import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, // 服务 server: { // 代理 proxy: { '/api': { target: 'https://v.api.aa1.cn/api', // 代理后台服务器地址 changeOrigin: true, //允许跨域 rewrite: path => path.replace(/^\/api/,'') // 将请求地址中的 /api 替换成空 } } }})七、Axios 请求案例

本次请求测试采用的是 APISpace 提供的测试 API ,当然如果你有自己的测试的 API 也可测试自己的 API

提示:

测试 APISpace 提供的接口需要登录其账号获取鉴权私钥,领取测试案例的使用次数方可测试

// 代理服务来解决跨域问题import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, // 服务 server: { // 代理 proxy: { '/apispace': { target: 'https://eolink.o.apispace.com/', // 代理后台服务器地址 changeOrigin: true, //允许跨域 rewrite: path => path.replace(/^\/apispace/,'') // 将请求地址中的 /ok 替换成空 } } }})随机笑话大全随机笑话大全--请求方式POST请求地址https://eolink.o.apispace.com/xhdq/common/joke/getJokesByRandom请求头X-APISpace-Token鉴权私钥请求头Authorization-Type鉴权方式,值为:apikey请求头Content-Typeapplication/x-www-form-urlencoded请求body参数pageSize获取条数(最多20条)必填,类型:String返回数据格式JSON返回案例请求测试案例:// 选项式:<script>import axios from 'axios'export default { data: () => ({ count: null, // 获取条数 jokes: null, // 笑话合集 }), methods: { // 获取随机笑话 getRandomJokes() { // 发送请求 axios( '/apisapce/xhdq/common/joke/getJokesByRandom', // 请求地址(已处理跨域) { method: 'POST', // 请求方式 // 请求头 headers: { 'X-APISpace-Token': 'p6cz2g80pcplxtituz1mz3ccgkgaaxl6', 'Authorization-Type': 'apikey', 'Content-Type': 'application/x-www-form-urlencoded' }, // 请求体中的参数 data: { 'pageSize': this.count } }).then(response => { const responseData = response.data // 获取服务器响应的数据 console.log(responseData) if (responseData.statusCode === '000000') { // 请求成功 this.jokes = responseData.result } else { // 请求失败 alert(responseData.desc) } }).catch(error => { alert('服务器异常') }) } }}</script><template> 获取个数:<input type="number" v-model="count"> <button @click="getRandomJokes">获取随即笑话</button> <hr> <ul> <li v-for="j in jokes" v-html="j.content"></li> </ul></template>// 组合式:<script setup>import axios from 'axios'import { ref } from 'vue'const count = ref(null) // 获取条数const jokes = ref(null) // 笑话合集// 获取随机笑话function getRandomJokes() { // 发送请求 axios( // 请求地址(已处理跨域) '/apisapce/xhdq/common/joke/getJokesByRandom', { // 请求方式 method: 'POST', // 请求头 headers: { 'X-APISpace-Token': 'p6cz2g80pcplxtituz1mz3ccgkgaaxl6', 'Authorization-Type': 'apikey', 'Content-Type': 'application/x-www-form-urlencoded' }, // 请求体中的参数 data: { 'pageSize': count.value } }).then(response => { const responseData = response.data // 获取服务器响应的数据 console.log(responseData) if (responseData.statusCode === '000000') { // 请求成功 jokes.value = responseData.result } else { // 请求失败 alert(responseData.desc) } }).catch(error => { alert('服务器异常') })}</script><template> 获取个数:<input type="number" v-model="count"> <button @click="getRandomJokes">获取随即笑话</button> <hr> <ul> <li v-for="j in jokes" v-html="j.content"></li> </ul></template>总结:

欢迎大家加入我的社区,在社区中会不定时发布一些精选内容:https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 Vue3 中 axios 的安装及使用,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。 我的其他文章:https://blog.csdn.net/weixin_62897746?type=blog

本文链接地址:https://www.jiuchutong.com/zhishi/298548.html 转载请保留说明!

上一篇:vue 项目的屏幕自适应方案(vue display)

下一篇:ChatGPT进阶-提示词中文版

  • 纳税等级怎么从M变成B需要什么条件
  • 什么叫应纳税所得额
  • 国税纳税标准
  • 公司购买的打印机
  • 已经抵扣过的进项票对方红冲之后怎么做账报税
  • 社保补贴有几年
  • 开具银行资信证明
  • 划拨土地划转是什么意思
  • 银行存款的会计处理方法
  • 免费送客户礼品的文案
  • 结转安装费用的会计分录
  • 变电站是否缴纳房产税
  • 应付职工薪酬科目有余额怎么调整
  • 个体户销售蔬菜免增值税吗
  • 生产型企业出口非自产产品能享有退税吗
  • 购进药材如何抵扣进项税额
  • 财税2009年59号解读
  • 快递费税率是6还是9
  • 劳务费可以开吗
  • 个体户超过3万怎么纳税
  • 三代税款手续费是什么意思
  • 工会票据电子化管理系统如何领发票
  • 预付账款收不到发票怎么冲账
  • 租赁设备发票备注栏怎么填写
  • 企业购车按揭产生的费用
  • 新成立的公司股权转让交税吗
  • MAC系统如何卸载重装安装W7系统
  • 现金流量表与资产负债表不符
  • 银行承兑汇票和银行汇票的区别
  • php哪个函数能取得字符串长度
  • 补交上一年度的养老保险
  • 外籍人员个税免征吗
  • 预防cpu被烧毁的办法
  • 金融商品转让属于什么服务
  • 对外投资概述
  • 如何检查路由器防火墙设置
  • php时间函数代码
  • 在代开发票时已经预缴个人所得税了,怎么处理?
  • 捐资民办学校可以盈利吗
  • 企业和银行未达账项
  • go开发web项目
  • react组件constructor
  • 怎么冲暂估入账
  • 爱上源码,重学Spring IoC深入
  • 营改增后残保金计入什么科目
  • 被投资企业清算,长期股权投资处理
  • 发工资扣了社保可以要求退回吗
  • 装修及室内设计学什么
  • 法人给对公账户转账
  • 年终奖影响社保缴费基数吗
  • 罚款可以直接在12123
  • DB2专家王云谈商业智能BI
  • 什么公司可以核定企业所得税
  • 发行股票的账务处理
  • 增值税抵扣了,主要成本怎么算
  • 基建期罚款支出账务处理
  • 增值税为什么不用计提
  • 车辆购置税如何账务处理
  • 暂估入库发票差异调整
  • 帮别的公司付款后发票该给谁开
  • 非流动资产处置利得计入什么科目
  • 资金调拨账务处理
  • MySQL中truncate误操作后的数据恢复案例
  • mysql缩印
  • win7系统修改
  • xp系统电脑开机密码忘记了
  • centos 操作
  • windows xp设置屏保密码
  • window98到windows10
  • 硬盘安装windows xp
  • 90后的毕业照
  • JS实现的base64加密解密完整实例
  • 实例讲解命局与大运流年作用
  • 什么是四个菜
  • css滤镜特效属于css样式定义分类中的
  • perl -p -i
  • 建筑企业异地预缴增值税计算
  • 期货手续费怎么算
  • 辽宁省大连市地震
  • 税务会计业务处理流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设