axios在vue中的简单封装及应用

Posted 2020-12-12 梁仕博

1、axios是什么？
　　ajax封装的是浏览器提供的xmlhttprequest，axios封装的是浏览器提供的fetch,fetch是为了应对其他需求所对于xmlhttprequest的再一次封装。一句话，axios走在了封装界的最前沿，而且大家对它的评价都相当不错，vue一开始是要搞一个自己的封装，但是到2.0是推荐的就是axios了。那它应该就是不错，毕竟我们需要学习的是vue全家桶。
2、axios的特性
　　这个粘贴一下官网自己的说法啊就行，没有一一验证，毕竟我的需求ajax也能满足，不过没办法，谁让它火呢。

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

3、axios在vue中的使用
　　1）、在vue项目中安装axios，使用命令 npm install --save axios vue-axios
　　2）、在vue项目的main.js中引入axios，贴一下代码，记住要在vue对象实例化之后使用。

import Vue from ‘vue‘
import axios from ‘axios‘
import VueAxios from ‘vue-axios‘

Vue.use(VueAxios, axios)

　　3）、在vue项目中使用axios，有三种使用方式，粘贴代码看下

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

4、axios在vue中封装一下

　　等等。。。