项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)

axios是vue中最常用的一个数据请求工具,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本来vue框架中是有vue-resource这个插件的,但是由于axios很好用,所以就不在维护vue-resource,并且推荐的大家使用axios。
axios中文文档地址:https://blog.lee-cloud.xyz/post/1/Axios-zhong-wen-wen-dang
axios英文github文档地址:https://github.com/axios/axios
axios的特点:

1、支持浏览器和node.js
2、支持promise
3、能拦截请求和响应
4、能转换请求和响应数据
5、能取消请求
6、自动转换JSON数据
7、浏览器端支持防止CSRF(跨站请求伪造)

vue中安装axios:

在vue中下载axios命令行:

npm install axios //在vue-cli2x.和vue-cli3x中都可以使用

vue add axios // 只能在vue-cli3x的版本中安装,不过也可以使用 npm install axios 安装,使用vue add axios 的好处就是安装可以更新你的文件,因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

安装成功后node_modules里面找到,当你安装完成后也能看到提示
在这里插入图片描述
然后我们可以选择再全局使用或者在单个文件中引用:

全局引用:
在main.js中引入axios:
在这里插入图片描述

import axios from 'axios'

Vue.axios.prototype.$axios = axios // 将axios挂载到$axios中这样就可以在全局中去使用了

在mounted写:
在这里插入图片描述
单页面引用:
就是在你当前需要的页面引入这个axios就行
在这里插入图片描述
然后在mounted中直接
在这里插入图片描述

总结:首先要安装,安装成功以后,根据你自己的需求看使用全局安装还是单页面安装,一般在项目中都是去全局使用axios还有就是封装axios,全局安装的时候是在main.js中引用,然后Vue.prototype.$axios = axios 挂载到这个里面,然后去页面中使用,如果在单个页面中使用,就直接在当前页面中import中使用,在mouted中直接调用就行。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

月落星河°

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值