09-axios在Vue中的导入与配置

09-axios

  • 前言
  • 首先简单了解什么是Axios?
    • 以上完成后就可以使用了

前言

我们接着上一篇文章 08-路由地址的数据获取 来讲。


下一篇文章 10-vuex在Vue中的导入与配置

首先简单了解什么是Axios?

Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。

关于axios的特点,可以查看axios中文文档,还可以了解一下axios, ajax和fetch的详细比较内容。

接下来开始安装axios,在项目目录下执行npm i axios(不同的node版本,成功后的提示不同)

在这里插入图片描述

安装成功后进行引入,在项目目录下src文件夹里创建新的utils文件夹,然后,在文件夹里创建axios.js

/utils/axios.js

/axios/index.js

/utils/request.js

// 1、引入axios内容
import axios from 'axios'// 2、设置请求默认内容
// 请求服务器地址
axios.defaults.baseURL = 'https://www.xxxx.com:8080'
// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.withCredentials = true
// 请求头中X-Requested-With字段值为XMLHttpRequest
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 请求头中携带token值
axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 使用post请求时,发送的数据类型(Content-Type)为 application/json
axios.defaults.headers.post['Content-Type'] = 'application/json'// axios使用拦截器,我们下面会讲一下拦截器的定义
axios.interceptors.response.use(res => {// 服务器返回值非正常情况下执行的代码if (typeof res.data !== 'object') {alert('服务器异常!')return Promise.reject(res)}if (res.data.resultCode != 200) { // 浏览器状态码不为200(正常)if (res.data.message) alert(res.data.message)  //判断是否有错误信息,有则打印错误信息if (res.data.resultCode == 416) { // 浏览器状态码为416(未登录)alert('未登录,请先登录!')}return Promise.reject(res.data)}// 服务器返回值正常情况下执行的代码return res.data
})
// 导出axios 实例
export default axios
// 1、引入axios内容
import axios from 'axios'// 2、设置请求默认内容
// 请求服务器地址
axios.defaults.baseURL = 'https://www.xxxx.com:8080'
// 跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等),也可以简单的理解为,当前请求为跨域类型时是否在请求中协带cookie。
axios.defaults.withCredentials = true
// 请求头中X-Requested-With字段值为XMLHttpRequest
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
// 请求头中携带token值
//axios.defaults.headers['token'] = localStorage.getItem('token') || ''
// 使用post请求时,发送的数据类型(Content-Type)为 application/json
axios.defaults.headers.post['Content-Type'] = 'application/json'axios.interceptors.request.use(config => {config.headers['token'] = localStorage.getItem('token') || '';return config
})// axios使用拦截器,我们下面会讲一下拦截器的定义
axios.interceptors.response.use(res => {// 服务器返回值非正常情况下执行的代码// if (typeof res.data !== 'object') {//   alert('服务器异常!')//   return Promise.reject(res)// }// if (res.data.resultCode != 200) { // 浏览器状态码不为200(正常)//   if (res.data.message) alert(res.data.message)  //判断是否有错误信息,有则打印错误信息//   if (res.data.resultCode == 416) { // 浏览器状态码为416(未登录)//     alert('未登录,请先登录!')//   }//   return Promise.reject(res.data)// }// 服务器返回值正常情况下执行的代码return res.data
})
// 导出axios 实例
export default axios

关于拦截器

​ 如果我们使用中需要统一处理所有 http 请求和响应, 就需要使用 axios 拦截器。

使用拦截器的原因:

​ 若出现请求数多的情况下,我们将会用到 axios 的一个API:拦截器。
​ 页面发送http请求,很多情况我们要对请求和其响应进行特定的处理,
​ 如果每个请求都附带后端返回的token,我们需要在拿到response之前loading动画的展示等。

拦截器的分类:

​ 拦截器分为 请求(request)拦截器和 响应(response)拦截器。

以上完成后就可以使用了

接下来以get请求为例,使用方式如下:

this.axios.get(url).then(res => {//请求成功,触发then中的函数console.log(res)  }).catch(error =>//请求失败,触发catch中的函数 可省略console.log(error))

某商城的API接口:http://backend-api-01.newbee.ltd/api/v1/index-infos

<template><div id="app"><ul><li v-for="(good, index) in list" :key="index">{{ good }}</li></ul></div>
</template><script>import axios from "./utils/axios";
export default {data() {return {list: [],};},mounted(){axios.get("http://backend-api-01.newbee.ltd/api/v1/index-infos").then(res => {console.log(res);this.list = res.data.hotGoodses})}
};
</script>

请求结果自行判断

关于post请求方式与get类似,不同点在于地址url和参数params分开传递,使用方式如下:

axios.post(url, params).then(res => {//请求成功,触发then中的函数console.log(res)  }).catch(error =>//请求失败,触发catch中的函数 可省略console.log(error))

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/31883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百度文心智能体,创建属于自己的智能体应用

百度文心智能体平台为你开启。百度文心智能体平台&#xff0c;创建属于自己的智能体应用。百度文心智能体平台是百度旗下的智能AI平台&#xff0c;集成了先进的自然语言处理技术和人工智能技术&#xff0c;可以用来创建属于自己的智能体应用&#xff0c;访问官网链接&#xff1…

docker基础使用教程

1.准备工作 例子&#xff1a;工程在docker_test 生成requirements.txt文件命令&#xff1a;&#xff08;使用参考链接2&#xff09; pip list --formatfreeze > requirements.txt 参考链接1&#xff1a; 安装pipreqs可能比较困难 python 项目自动生成环境配置文件require…

通俗解释resultType和resultMap的区别

【 1 对于单表而言&#xff1a; 注&#xff1a;以下都是摘抄过来的&#xff0c;做了让自己更能理解的版本 如果数据库返回结果的列名和要封装的实体的属性名完全一致的话用 resultType 属性 如果数据库返回结果的列名&#xff08;起了别名&#xff09;和要封装的实体的属性名…

ArcGIS批量投影转换的妙用(地理坐标系转换为平面坐标系)

​ 点击下方全系列课程学习 点击学习—>ArcGIS全系列实战视频教程——9个单一课程组合系列直播回放 这次文章我们来介绍一下&#xff0c;如何巧妙用要素数据集来实现要素的批量投影。不需要ArcGIS的模型构建器与解决。 例如&#xff0c;有多个要素要将CGCS_2000地理坐标系投…

D触发器(D Flip-Flop)与D锁存器(D Latch)

1 基础概念 我们先来简单回顾一下D触发器&#xff08;D flip-flop&#xff09;和D锁存器&#xff08;D latch&#xff09;的概念&#xff0c;以及它们在数字电路中的作用。 1.1 D触发器&#xff08;D Flip-Flop&#xff09; D触发器是一种数字存储器件&#xff0c;它在时钟信号…

【VS Code 插件】SQLite 可视化插件

VScode 插件分享篇之sqlite可视化工具 项目经常用到SQLite这个轻量型数据库&#xff0c;于是乎&#xff0c;就想着找一个可视化工具&#xff0c;但是我有时候只是想方便预览数据 表&#xff0c;又不想安装额外的程序&#xff0c;那么这款插件很适合你。 用习惯VS Code的小伙伴…

HarmonyOS Next 系列之沉浸式状态实现的多种方式(七)

系列文章目录 HarmonyOS Next 系列之省市区弹窗选择器实现&#xff08;一&#xff09; HarmonyOS Next 系列之验证码输入组件实现&#xff08;二&#xff09; HarmonyOS Next 系列之底部标签栏TabBar实现&#xff08;三&#xff09; HarmonyOS Next 系列之HTTP请求封装和Token…

Win11 删除文件时提示“找不到该项目,请重试”的解决办法

1、Win R 打开运行窗口&#xff0c;输入 notepad 并回车打开文本文档(记事本)软件&#xff0c;如下图&#xff1a; 2、在文本文档(记事本)软件中复制粘贴以下代码&#xff0c;如下图&#xff1a; del /f /a /q \\?\%1 rd /s /q \\?\%1或DEL /F /A /Q \\?\%1 RD /S /Q \\?…

红队内网攻防渗透:内网渗透之内网对抗:网络通讯篇防火墙组策略入站和出站规则单层双层C2正反向上线解决方案

红队内网攻防渗透 1. 内网网络通讯1.1 防火墙策略-入站规则&出站规则&自定义1.1.1 防火墙默认入站&出站策略1.1.2 防火墙自定义入站&出站策略1.1.3 内网域防火墙同步策略1.2 防火墙限制1.2.1 防火墙限制端口1.2.2 防火墙限制协议1.2.2.1 防火墙协议入站限制1.2…

html做一个分组散点图图的软件

在HTML中创建一个分组散点图&#xff0c;可以结合JavaScript库如D3.js或Plotly.js来实现。这些库提供了强大的数据可视化功能&#xff0c;易于集成和使用。下面是一个使用Plotly.js创建分组散点图的示例&#xff1a; 要添加文件上传功能&#xff0c;可以让用户上传包含数据的文…

昇思25天学习打卡营第4天|网络构建|函数式自动微分

学AI还能赢奖品&#xff1f;每天30分钟&#xff0c;25天打通AI任督二脉 (qq.com) 网络构建 神经网络模型是由神经网络层和Tensor操作构成的&#xff0c;mindspore.nn提供了常见神经网络层的实现&#xff0c;在MindSpore中&#xff0c;Cell类是构建所有网络的基类&#xff0c;也…

基于uni-app和图鸟UI的智慧农业综合管控平台小程序技术实践

摘要&#xff1a; 随着信息化技术的飞速发展&#xff0c;智慧农业已成为推动农业现代化、提升农业生产效率的重要手段。本文介绍了一款基于uni-app框架和图鸟UI设计的智慧农业综合管控平台小程序&#xff0c;该平台整合了传感器控制、农业数据监测、设施管控、农业新闻传播以及…

论文:R语言数据分析之机器学习论文

欢迎大家关注全网生信学习者系列&#xff1a; WX公zhong号&#xff1a;生信学习者Xiao hong书&#xff1a;生信学习者知hu&#xff1a;生信学习者CDSN&#xff1a;生信学习者2 一、研究背景 全球范围内&#xff0c;乳腺癌是导致癌症发病率和死亡率的主要疾病之一。根据2018年…

爬虫经典案例之爬取豆瓣电影Top250(方法二)

在上一篇文章的基础上&#xff0c;改进了代码质量&#xff0c;增加了多个正则表达式匹配&#xff0c;但同事也增加了程序执行的耗时。 from bs4 import BeautifulSoup import requests import time import re from random import randint import pandas as pdurl_list [https…

【MySQL 的三大日志的作用】

在管理MySQL数据库时&#xff0c;了解和区分数据库使用的三大日志类型至关重要。这些日志对于确保数据的完整性、提供恢复机制以及维持数据库的稳定性发挥着关键作用。最主要还是小豆前段时间去参加面试被问到了这些内容&#xff0c;下面将详细讨论Redo Log、Binlog和Undo Log的…

各种开发语言运行时占用内存情况比较

随着科技的发展&#xff0c;编程语言种类繁多&#xff0c;不同的编程语言在运行时的内存占用情况各不相同。了解这些差异对于开发者选择合适的编程语言尤为重要。本文将讨论几种主流编程语言在运行时的内存占用情况&#xff0c;包括C、C、Java、Python和Go等。 1. C语言 内存…

宏集物联网工控屏通过 S7 ETH 协议采集西门子 1200 PLC 数据

前言 为了实现和西门子PLC的数据交互&#xff0c;宏集物联网HMI集成了S7 PPI、S7 MPI、S7 Optimized、S7 ETH等多个驱动来适配西门子200、300、400、1200、1500、LOGO等系列PLC。 本文主要介绍宏集物联网HMI如何通过S7 ETH协议采集西门子1200 PLC的数据&#xff0c;文中详细介…

Element 进度条样式优化

在开发后台管理系统时&#xff0c;经常会用到进度条这样一个控件&#xff0c;Element UI中提供了progress这样一个组件&#xff0c;如下图所示&#xff1a; 该组件默认的颜色会比较单一&#xff0c;为此时常需要对该组件的样式进行一些优化&#xff0c;以满足实际项目的需求。 …

vue跳转页面 如果登录了直接跳转 没有登录登录完以后直接跳转,使用vuex管理登录状态

在Vue.js中&#xff0c;如果你需要在用户登录后重定向到他们原本想要访问的页面&#xff0c;你可以使用Vue Router的beforeEach守卫来实现这个功能。以下是实现这一需求的步骤&#xff1a; 存储目标路由&#xff1a;在用户被重定向到登录页面之前&#xff0c;存储他们想要访问的…

shinydashboard与shiny详细教程

以下是一个详细的教程&#xff0c;展示如何使用 shinydashboard 和 shiny 创建一个交互式的仪表板应用。我们将逐步讲解如何设置基本的仪表板结构、添加交互组件以及将数据集成到应用中。 安装必要的包 首先&#xff0c;确保你已经安装了 shiny 和 shinydashboard 包&#xf…