2.axios的介绍和页面配置

最新推荐文章于 2024-06-13 02:48:16 发布
最新推荐文章于 2024-06-13 02:48:16 发布
阅读量189 收藏
点赞数 2
分类专栏： axios 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yujiabao702/article/details/137792904
版权

axios 是什么？

是基于 Promise 的 HTTP 客户端，可以在浏览器和 node.js 中运行。在浏览器中可以借助 axios 发送 ajax 请求，在 node.js 当中向远端服务发送 http 请求。

axios 的特点

  • 在浏览器端发送 ajax 请求。

  • 在 node.js 当中发送 http 请求。

  • 支持 Promise 的 API。

  • 可以设置请求和响应拦截器，可以在请求之前做一些准备工作，在响应回来以后可以对结果做一些预处理。

  • 可以对请求和响应数据做转换。

  • 可以取消请求。

  • 自动将结果转换为 JSON 数据。

  • 可以做保护去阻挡跨站攻击（XSRF）。

axios 的安装

  • 项目中一般都是 npm i axios 去安装。

  • 但是我们这里为了学习，用 CDN 引入即可。

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>

月亮慢慢圆o
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
axios.defaults.baseURL的三种配置方法
skysys的研究小屋
01-12 4796
本文介绍我在项目中使用axios切换生产环境和开发环境接口地址的三种配置 1.常规设置 在只需要配置单个或有限明确的接口域名时可以直接设置，在生产环境和开发环境切换时需手动更改 axios.defaults.baseURL="http://192.168.1.1:5000"; 2.动态获取请求地址 在线上地址不明确或者不想手动更改地址的时候可设置自动获取当前的域名进行请求，不好的地方在于跨域的话端口是写死的 let protocol = window.location.protocol; //协议
一个简单vue.config.js配置和axios简单封装
小兔&崽子的博客
07-31 2975
一个简单vue.config.js配置和axios封装 从vue-cli3.0脚手架开始，搭建的Vue项目，目录中是不存在vue.config.js文件的。所以当我们想要做一些自己的配置的时候要自己手动建一个vue.config.js文件。 1、vue.config.js配置 新建vue.config.js vue.config.js代码 module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/kuaChe
nuxt.js中 axios的配置
zhanghaoran
04-08 2323
1.下载axios npm i @nuxtjs/axios -s 2. 在nuxt.config.js中配置axios modules: [ '@nuxtjs/axios', ], 此时， 就可以在组件中使用啦 async asyncData({$axios}) { let { res } = await $axios.get(`https://xxx.com/api/xx...
vue2+axios实现注册页面加载动画消息和配置跨域代理
Sebastien23的博客
06-26 1011
安装axios工具： 在中引入axios： 定义加载动画和消息 在目录下新建请求文件，定义加载动画和方法： 配置跨域代理 编辑配置前后端跨域请求： 运行启动应用时遇到以下报错。 在vue-cli.3.3版本后被废除了，这里需要将中的 改为 错误2：webpack config.devtool Webpack的配置不符合当前版本语法。将中的 修改为 错误3：webpack devServer before 在webpack 3.x中，是有效属性，到了4.x之后，就换成了。将中的 修改为 错误4：webpa
axios介绍和使用
热门推荐
qq_40837310的博客
02-21 8万+
简介 本文主要讲解axios的概念和基本使用。 axios时目前最流行的ajax封装库之一，用于很方便地实现ajax请求的发送。 支持的功能： 从浏览器发出 XMLHttpRequests请求。 从 node.js 发出 http 请求。 支持 Promise API。 能拦截请求和响应。 能转换请求和响应数据。 取消请求。 实现JSON数据的自动转换。 客户端支持防止 XSRF攻击。 先借助json-server创建一个简单的服务，供ajax发送请求，json-server是一个简单的可以接收rest
03.axios数据提交和错误处理
qq_53914247的博客
03-06 651
主要介绍了axios数据提交和错误处理
Nuxt.js整合axios
weixin_45822542的博客
12-15 3398
整合 axios 默认整合 在构建项目时，如果选择axios组件，nuxt.js将自动与axios进行整合 手动整合 步骤1：package.json有axios的版本 "dependencies": { "@nuxtjs/axios": "^5.13.1", }, 步骤2：安装 npm install 步骤3：nuxt.config.js 以模块的方式添加axios modules: [ // https://go.nuxtjs.dev/axios '@nuxt
vue.config.js配置及axios
m0_52374678的博客
04-19 1893
后端给你域名或者ip了，让你配置 配置vue.config.js 1、在自己项目根目录下新建文件vue.config.js，将下面代码copy进去 vue.config.js module.exports = { publicPath: './', //跨域代理 devServer: { host: '192.168.42.89', //这是我本机ip地址 // 自定义域名，需要在hosts文件里配置 port: 8080, open: true,
nuxt.js中axios的配置
Elon丶的博客
09-02 2409
下载axios npm i @nuxtjs/axios -s 在nuxt.config.js中配置axios modules: [ '@nuxtjs/axios', ], 此时， 就可以在组件中使用啦 async asyncData(ctx) { const data = await ctx.$axios.get('/api/address') console.log(data.data); }, 配置axios的baseUrl, 拦截器 export ..
Vue集成axios配置文件request.js
tianyw0619的博客
09-15 1059
Vue集成axios
中转平台框架 + 登录页面 + 路由配置 + mockjs配置 + axios配置+退出配置+vuex配置+echarts 配置
07-08
中转平台资源框架，该框架使用的技术为：vue 框架 + vue-router 路由布局 + element-ui 库 + mockjs 数据配置 + axios 配置 + vuex 配置 + echarts 配置 + 登录页面 + 退出设置等已经设置好的布局，只需要往里面填...
Vue在 Nuxt.js 中重定向 404 页面的方法
10-17
主要介绍了Vue在 Nuxt.js 中重定向 404 页面的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue页面使用Axios发送异步请求
07-06
告诉浏览器，我允许哪些服务器访问，哪些请求方式访问，是否运行携带请求头
Axios-For-WeixinApp:Axios For WeixinApp. 基于 axios 对 微信小程序请求方法的封装 支持大部分axios特性
05-03
axios-for-mpweixin Axios 小程序版本 API 文档 使用方法 微信小程序根目录执行以下命令 npm i axios-for-mpweixin 然后使用微信开发者工具进行构建 支付宝小程序灰度测试中，在 IDE 中进行安装后直接引入即可。 在 ...
woyouzhe：基于vue-cli3.x + axios构建多页面应用H5移动端电商网站
02-14
前言 基于vue-cli3.x + axios构建多页面应用的H5移动端电商网站，采用前替代分离技术，本项目是利用短期时间开发完成的简单版，加深一下对各...│ vue.util.js // 打包多页面配置 ├─public │ favicon.ico // 图标 │
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 284
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 1057
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 363
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
vue使用config.js配置全局axios路由
05-20
要在Vue项目中全局配置axios和路由，可以按照以下步骤进行： 1. 安装axios和vue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件，用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头中 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面，并携带当前页面的路径 // 在登录成功后返回当前页面，这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: alert('登录过期，请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误，直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js中引入config.js文件，并将axios和router挂载到Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值