码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-06-14 20:58:39      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:使用命令   一个   data   响应   是什么   开始   学习   this   promise   

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中封装一下

  等等。。。




 

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

标签:使用命令   一个   data   响应   是什么   开始   学习   this   promise   

原文地址:https://www.cnblogs.com/liangshibo/p/13126357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!