axios 全攻略之基本介绍与使用(GET 与 POST)

axios

axios 是一个基于 Promise 的 HTTP 客户端,专门为浏览器和 node.js 服务

Vue 2.0 官方推荐使用 axios 来代替原来的 Vue request,所以这里介绍一下 axios 的功能和基本的使用方法,希望能够对各位所有帮助。^_^

功能

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换 JSON 数据格式
  • 客户端支持防范 XSRF 攻击

浏览器支持

axios 能够支持 IE7 以上的 IE 版本,同时能够支持大部分主流的浏览器,需要注意的是,你的浏览器需要支持 Promise,才能够使用 axios。所以比较好的做法是先安装 polyfill,然后再使用 axios。

安装

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用

这里以 Vue 为例:在 NPM 中安装 axios 之后,需要在 main.js 文件中引用 package

import axios from ‘axios‘

然后全局绑定

Vue.prototype.$http = axios

然后可以在 .vue 文件中使用 $http 来代替 axios

GET

// Make a request for a user with a given ID
axios.get(‘/user?ID=12345‘)
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// Optionally the request above could also be done as
axios.get(‘/user‘, {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  }); 

POST

axios.post(‘/user‘, {
    firstName: ‘Fred‘,
    lastName: ‘Flintstone‘
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

同时发送多个请求

function getUserAccount() {
  return axios.get(‘/user/12345‘);
}

function getUserPermissions() {
  return axios.get(‘/user/12345/permissions‘);
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

当然,axios 的功能还包括 axios API、interceptor 等等,这里想要详细了解的可以查看官方文档:axios,后面陆续会介绍下 interceptor 的使用和各类参数的配置。

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 3.0 未本地化版本许可协议进行许可。 https://blog.csdn.net/xjlinme/article/details/77650059

原文地址:https://www.cnblogs.com/weiguoaa/p/9077985.html

时间: 2024-10-21 00:34:13

axios 全攻略之基本介绍与使用(GET 与 POST)的相关文章

axios全攻略

随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!!有这个还要什么自行车!!所以推荐大家学习这种库,最好详细阅读其官方文档.大概翻译了一下 axios 的官方文档,相信大家只要吃透本文再加以实践,axios 就是小意思啦!! 如果您觉得本文对您有帮助,不妨点个赞或关注收藏一下,您的鼓励对我非常重要. axios 简介 axios

Retrofit全攻略——进阶篇

最近事比较多,距离上次写文章已经过去了一个月了.上一篇文章Retrofit全攻略--基础篇 介绍了Retrofit的基础用法,这篇文章介绍点进阶的用法. 打印网络日志 在开发阶段,为了方便调试,我们需要查看网络日志.因为Retrofit2.0+底层是采用的OKHttp请求的.可以给OKHttp设置拦截器,用来打印日志. 首先可以在app/build.gradle中添加依赖,这是官方的日志拦截器. compile 'com.squareup.okhttp3:logging-interceptor:

Windows Socket五种I/O模型——代码全攻略(转)

Winsock 的I/O操作: 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待,不会将控制权交给程序.套接字 默认为阻塞模式.可以通过多线程技术进行处理. 非阻塞模式:执行I/O操作时,Winsock函数会返回并交出控制权.这种模式使用 起来比较复杂,因为函数在没有运行完成就进行返回,会不断地返回 WSAEWOULDBLOCK错误.但功能强大.为了解决这个问题,提出了进行I/O操作的一些I/O模型,下面介绍最常见的三种: Windows Socket五种I/O模型——代码全攻

Tomcat全攻略

tomcat全攻略 1.tomcat是什么? Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,它早期的名称为catalina,后来由Apache.Sun 和其他一些公司及个人共同开发而成,并更名为Tomcat.Tomcat是应用(java)服务器,它是一个servlet容器,是Apache的扩展,但它是独立运行的.tomat应用于Java Servlet, JavaServer Pages,Java Expression Language以及其他的Javaweb开发的技术. Th

从小工到专家 ——读《Java程序员职场全攻略》有感

从小工到专家 ——读<Java程序员职场全攻略>有感   <Java程序员职场全攻略>是以故事的形式,向读者介绍Java程序员的职场经验.作者牛开复在北京从事软件开发,已经是一位业界高人,而书中的主人公蔡佳佳则是一名计算机专业的大三学生,作为师兄的牛开复一步一步指引蔡佳佳从学校走入职场,开始他的职业生涯.书中多采用二人对话的形式,谈到了职场中可能会遇到的各种问题,语言形式也非常轻松活泼,生动有趣,通俗易懂. 初窥门径——行业揭秘 相信很多同学都急切的想了解IT这个行业在国内的现状以

Gradle脚本基础全攻略

[工匠若水 http://blog.csdn.net/yanbober 转载请注明出处.点我开始Android技术交流] 1 背景 在开始Gradle之前请务必保证自己已经初步了解了Groovy脚本,特别是闭包规则,如果还不了解Groovy则可以先看<Groovy脚本基础全攻略>这一篇博客速成一下Groovy基础,然后再看此文即可.关于Gradle速成干货基础详情也请参考Geadle官方网站,不好意思我太Low了. Gradle核心是基于Groovy的领域特定语言(DSL,具体概念参见<

SQL Server 备份和还原全攻略

原文:SQL Server 备份和还原全攻略 一.知识点 完全备份: 备份全部选中的文件夹,并不依赖文件的存档属性来确定备份那些文件.(在备份过程中,任何现有的标记都被清除,每个文件都被标记为已备份,换言之,清除存档属性).完全备份也叫完整备份. 差异备份: 差异备份是针对完全备份:备份上一次的完全备份后发生变化的所有文件.(差异备份过程中,只备份有标记的那些选中的文件和文件夹.它不清除标记,即:备份后不标记为已备份文件,换言之,不清除存档属性). 增量备份: 增量备份是针对于上一次备份(无论是

3D计算机图形学零起点全攻略(转)

3D计算机图形学零起点全攻略 这篇文章不包含任何技术知识,但我的希望它能指明一条从零开始通往3D领域的成功之路.我将罗列我看过的相关经典书籍作为学习文献,阅读规则是每进入下个内容,我都会假设已经完成前面全部的文献研习内容.相信若能按照这条路走到最后,会有所进益. 完成整部分内容需要具备基础: 英语:CET4以上 数学:精通数字加减乘除法. 物理:基本力学. 计算机:了解电脑的基本知识,熟练使用Windows. 电脑配置: CPU:双核1.5以上 显卡:NVIDIA GeForce8400G MS

iOS 使用Charts框架 折线,柱状,K线,饼状,雷达全攻略

我是前言: 大约几个月前我在某平台写了一篇文章, 文中简单地介绍了Charts两种图表的样式的使用, 不过有种意犹未尽的感觉, 利用周末的空闲时间再次看了看, 有了新的收获, 今天发出来,分享给大家, 来稍加详细的再次走进Charts的世界. 完全纯代码. 经过测试: 1.1使用cocoa pods集成(只能在9.3之后运行), 有知道原因的请在下方评论 1.2 这篇文章的例子我是使用手动加入的framework进行测试的. 如果你不清楚如何加入三方框架请点击看看这篇文章http://www.j