介绍
当我们使用Vue开发项目时,会发送Ajax请求服务器接口,会对axios封装。
Axios(ajax i/o system)不是一种新技术,本质上也是对原生XHR(XMLHttpReques)的封装,只不过它是基于Promise的,是Promise的实现版本,作用于浏览器和node.js中。能拦截请求和响应,自动转换JSON数据。符合最新的ES规范。
特点
-
从浏览器创建 XMLHttpRequests
-
从node.js创建http请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
超时处理
-
查询参数序列化支持嵌套处理
-
将HTML Form转换成JSON进行请求
-
自动转换JSON数据
等等一些
安装axios
1.npm安装
npm install axios
2.bower安装
bower install axios
3.yarn安装
yarn add axios
4.cdn引入
A. jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
B. unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
这里我用的是npm安装
使用axios
创建的是vue2项目,注意版本。
在main.js中引入axios
//引入axios
import axios from 'axios'
Vue.prototype.$axios = axios
组件中使用
App.vue
在public中新建data.json文件
data.json
HelloWorld.vue
在组件中,引入axios并使用,就构建了一个基本的get请求,接着调用then方法即可查看请求的结果了。
暂时就这么多,后续会再补充,有什么问题,欢迎指正。