项目实战-爬坑系列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里面找到,当你安装完成后也能看到提示
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)_第1张图片
然后我们可以选择再全局使用或者在单个文件中引用:

全局引用:
在main.js中引入axios:
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)_第2张图片

import axios from 'axios'

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

在mounted写:
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)_第3张图片
单页面引用:
就是在你当前需要的页面引入这个axios就行
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)_第4张图片
然后在mounted中直接
项目实战-爬坑系列vue-cli3.x中axios请求网络数据(五)_第5张图片

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

你可能感兴趣的:(VUE)