专栏首页性能与架构JS的 HTTP 库 Axios

JS的 HTTP 库 Axios

Axios 是一个基于 promise 的 HTTP 库,可以工作于浏览器中,也可以在 node.js 中使用,提供了一个API用来处理 XMLHttpRequests 和 node 的 http 接口

可能很多人会疑问:用 jquery 的 get/post 不就很好了,为什么要用 Axios?原因主要有:

(1)Axios 支持 node.js,jquery 不支持

(2)Axios 基于 promise 语法标准,jquery 在 3.0 版本中才全面支持

(3)Axios 是一个小巧而专业的 HTTP 库,jquery 是一个大而全的库,如果有些场景不需要使用jquery的其他功能,只需要HTTP相关功能,这时使用 Axios 会更适合

下面了解下 Axios 的具体使用方式

示例

基本操作

GET

axios.get('https://api.github.com/users/' + username)

.then(function(response){

console.log(response.data);

console.log(response.status);

});

POST

axios.post('/save', { firstName: 'Marlon', lastName: 'Bernardes' })

.then(function(response){

console.log('saved successfully');

})

.catch(function (error) {

console.log(error);

});

除了 get/post,还可以请求 delete,head,put,patch

同时执行多个请求

axios.all([

axios.get('https://api.github.com/xxx/1'),

axios.get('https://api.github.com/xxx/2')

])

.then(axios.spread(function (userResp, reposResp) {

// 上面两个请求都完成后,才执行这个回调方法

console.log('User', userResp.data);

console.log('Repositories', reposResp.data);

}));

当所有的请求都完成后,会收到一个数组,包含着响应对象,其中的顺序和请求发送的顺序相同,可以使用 axios.spread 分割成多个单独的响应对象

自定义 header

var config = {

headers: {'X-My-Custom-Header': 'Header-Value'}

};

axios.get('https://api.github.com/users/xxx', config);

axios.post('/save', { firstName: 'Marlon' }, config);

拦截器

可以在 then 或者 catch 之前对 requests/responses 进行拦截处理

添加

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});

移除

axios.interceptors.request.eject(myInterceptor);

安装

使用 npm

npm install axios

使用 bower

bower install axios

手动下载

https://github.com/mzabriskie/axios/tree/master/dist

使用

node 中运行

var axios = require('axios')

axios.get('https://api.github.com/users/xxx');

浏览器中运行

<script src="./bower_components/axios/dist/axios.js"></script>

<script>

axios.get('https://api.github.com/xxx');

</script>

项目地址 https://github.com/mzabriskie/axios

本文分享自微信公众号 - 性能与架构(yogoup),作者:杜亦舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Elasticsearch 开箱指南

    Elasticsearch (ES) 是一个数据库,提供了分布式的、准实时搜索和分析。

    dys
  • 【教程】Hadoop HDFS 实践

    1. 教程内容 1)目标 主要帮您解决以下几个问题: HDFS 是用来解决什么问题的?怎么解决的? 如何在命令行下操作 HDFS ? 如何使用 java api...

    dys
  • 前端工程 - 静态资源的更新

    示例 <html> <head> <link href='a.css' type='text/css'/> <script src="b.js"><...

    dys
  • 一文让你认识 axios

    如果要全局使用axios就需要在main.js中设置成全局的,然后再组件中通过this调用

    公众号---志学Python
  • 【融职培训】Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • axios进阶之路——基础篇

    本课题包含三篇:基础篇;拦截器篇;封装篇。本篇为基础篇,主题为axios基础介绍及安装使用。

    流眸
  • VueJS ajax

    vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新 到2.0之后,作...

    cwl_java
  • Nuxt使用axios跨域问题解决方法

    Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 ...

    用户6167509
  • vue-cli-3.0 axios 配置 转

    参考:[https://www.jianshu.com/p/b22d03dfe006]

    双面人

扫码关注云+社区

领取腾讯云代金券