参考:https://www.awesomes.cn/repo/mzabriskie/axios

axios 介绍

基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用

  • 功能特性

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
自动转换 JSON 数据
客户端支持保护安全免受 XSRF 攻击

GET请求

//通过给定的ID来发送请求
axios.get('/user?ID=12345').then(function(response){
  console.log(response);
}).catch(function(err){
  console.log(err);
});

//以上请求也可以通过这种方式来发送
axios.get('/user',{
  params:{ID:12345}
}).then(function(response){
  console.log(response);
}).catch(function(err){
  console.log(err);
});

POST请求

axios.post('/user',{
  firstName:'Fred',
  lastName:'Flintstone'
}).then(function(res){
  console.log(res);
}).catch(function(err){
  console.log(err);
});

一次性并发多个请求

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){
  //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))

axios可以通过配置(config)来发送请求

//发送一个`POST`请求
axios({
  method:"POST",
  url:'/user/12345',
  data:{
    firstName:"Fred",
    lastName:"Flintstone"
  }
});

//发送一个`GET`请求(默认的请求方式)
axios('/user/12345')

请求的配置(request config)

以下就是请求的配置选项,只有url选项是必须的,如果method选项未定义,那么它默认是以GET的方式发出请求

{

url:'/user',

//default 请求资源的方式
method:'get'

// 如果`url`不是绝对地址,那么`baseURL`将会加到`url`的前面
baseURL:'https://some-domain.com/api/',

//`transformRequest 请求发送到服务器之前对请求的数据做出一些改动, 适用于以下请求方式:`put/post/patch`,必须返回一个字符串、-一个`ArrayBuffer`或者`Stream`
transformRequest:[function(data){
  return data;
}],

//`transformResponse`选项允许我们在数据传送到`then/catch`方法之前对数据进行改动
transformResponse:[function(data){
  return data;
}],

//`headers`选项是需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},

//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
params: {
  ID:12345
},

//`paramsSerializer`是一个可选的函数,起作用是让参数(params)序列化
paramsSerializer: function(params){
  return Qs.stringify(params,{arrayFormat:'brackets'})
},

//`data`选项是作为一个请求体而需要被发送的数据,该选项只适用于方法:`put/post/patch`
data {
  firstName:"Fred"
},

//`timeout`选项定义了请求发出的延迟毫秒数
timeout:1000,

//`withCredentails`选项表明了是否是跨域请求
withCredentials:false,//default

//返回数据的格式
responseType:'json',//default

//`httpAgent/httpsAgent`定义了当发送http/https请求要用到的自定义代理,/keeyAlive在选项中没有被默认激活
httpAgent: new http.Agent({keeyAlive:true}),
httpsAgent: new https.Agent({keeyAlive:true}),

//proxy定义了主机名字和端口号,
proxy: {
  host:'127.0.0.1',
  port: 9000,
  auth: {
    username:'skda',
    password:'radsd'
  }
}

}

请求返回的内容

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //`config`是在请求的时候的一些配置信息
  config: {}
}

(生产)axios - 请求接口的更多相关文章

  1. axios请求接口的踩坑之路

    1.跨域问题除了前端安装插件还需要后端php设置,设置如下 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, ...

  2. vue 中使用 axios 请求接口,请求会发送两次问题

    在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...

  3. 为什么axios请求接口会发起两次请求

    之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...

  4. vue项目axios请求接口,后端代理请求接口404,问题出现在哪?

    在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...

  5. vue 利用axios请求接口下载excel

    一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...

  6. axios请求接口的时候带一个参数

    getHomeInfo () { this.axios.get('/api/index.json?city=' + this.city) .then(this.getHomeInfoSucc) } 尽 ...

  7. axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数

    1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...

  8. Vue+axios统一接口管理

    通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的a ...

  9. vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址

    一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...

随机推荐

  1. 「BZOJ1010」[HNOI2008] 玩具装箱toy(斜率优化)

    P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号为 1⋯N1\cdots N1⋯N ...

  2. Tarjan+树形DP【洛谷P2515】[HAOI2010]软件安装

    [洛谷P2515][HAOI2010]软件安装 题目描述 现在我们的手头有N个软件,对于一个软件i,它要占用Wi的磁盘空间,它的价值为Vi.我们希望从中选择一些软件安装到一台磁盘容量为M计算机上,使得 ...

  3. 关于NSFetchedResultsController的一些用法

    如何在iPhone等设备持久保存数据,需要用到Core Data,它能帮你快速而有效率的完成数据储存,Core Data 编程经常用到 NSFetchedResultsController这个类,刚开 ...

  4. CF D. Fair(思维+DFS)

    http://codeforces.com/contest/987/problem/D 题目大概: 给出一个n个城镇m条边的图,给出每个城镇拥有的特产(可能多个城镇有相同特产).有k种不同特产. 要求 ...

  5. 75th LeetCode Weekly Contest All Paths From Source to Target

    Given a directed, acyclic graph of N nodes.  Find all possible paths from node 0 to node N-1, and re ...

  6. c# mvc会话过期设置

    configuration 元素(常规设置架构)   system.web 元素(ASP.NET 设置架构)     sessionState 元素(ASP.NET 设置架构) <session ...

  7. Oracle的CLOB大数据字段类型

    转载:https://www.cnblogs.com/Grand-Jon/p/7389427.html 一.Oracle中的varchar2类型 我们在Oracle数据库存储的字符数据一般是用VARC ...

  8. MySQL之concat以及group_concat的用法

    本文中使用的例子均在下面的数据库表tt2下执行: 一.concat()函数 1.功能:将多个字符串连接成一个字符串. 2.语法:concat(str1, str2,...) 返回结果为连接参数产生的字 ...

  9. 2.2 Go 常量与枚举

    package main import ( "fmt" "math" ) //常量 func cons(){ , //常量的数字在不明确指定类型的情况下,即可以 ...

  10. set与map

    set /*set里面没有相同的元素 所以可以用于数组去重*/ //内部去重用的是=== 对象不等 但是 NaN等 //其本身是构造函数 let s=new Set([1,2,{},{},3,4,Na ...