(生产)axios - 请求接口
参考: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 - 请求接口的更多相关文章
- axios请求接口的踩坑之路
1.跨域问题除了前端安装插件还需要后端php设置,设置如下 Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, ...
- vue 中使用 axios 请求接口,请求会发送两次问题
在开发项目过程中,发现在使用axios调用接口都会有两个请求,第一个请求时,看不到请求参数,也看不到请求的结果:只有第二次请求时才会有相应的请求参数以及请求结果: 那为甚么会有这么一次额外的请求呢,后 ...
- 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...
- vue项目axios请求接口,后端代理请求接口404,问题出现在哪?
在vue项目中,列表数据需要用到qq音乐接口中的数据,但是直接请求不行,有host及referer限制,需要采用后端代理的方式.借助axios及node的express,在dev-server.js中 ...
- vue 利用axios请求接口下载excel
一般有三种方法: 方法一: 通过a标签下载 // href为文件的存储路径或者地址,download为问文件名 <a href="/images/download.jpg" ...
- axios请求接口的时候带一个参数
getHomeInfo () { this.axios.get('/api/index.json?city=' + this.city) .then(this.getHomeInfoSucc) } 尽 ...
- axios,vue-echarts, async, vue 图表数据处理; axios 跨域代理; 异步同步请求接口;生命周期函数
1.vue-echarts 安装和组件引用 插件官网 https://github.com/ecomfe/vue-echarts 安装 npm install eacharts vue-echarts ...
- Vue+axios统一接口管理
通过axios请求接口已经很简单了,但最近在做一个vue项目,想着把axios请求再封装一下,这样api就可以只在一处配置成方法,在使用的时候直接调用这个方法. 但咱们不用每个接口都定义成一个啰嗦的a ...
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
一.开发环境中跨域 使用 Vue-cli 创建的项目,开发地址是 localhost:8080,需要访问非本机上的接口http://10.1.0.34:8000/queryRole.不同域名之间的访问 ...
随机推荐
- web安全-传输安全
web安全-传输安全 anyproxy 代理服务器在之间可以看到 1.HTTP传输窃听 浏览器-代理服务器-链路-服务器 传输链路窃听篡改 2.HTTP窃听 >* 窃听用户密码 >* 窃听 ...
- 基本css拼图形
关闭按钮: <em class="close"></em> .close { width: 16px; height: 16px; text-align: ...
- 老男孩Day4作业:员工信息查询系统
1.作业需求: (1).工信息表程序,实现增删改查操作: (2).可进行模糊查询,语法至少支持下面3种: select name,age from staff_table where ...
- LCA 【bzoj 4281】 [ONTAK2015]Związek Harcerstwa Bajtockiego
[bzoj 4281] [ONTAK2015]Związek Harcerstwa Bajtockiego Description 给定一棵有n个点的无根树,相邻的点之间的距离为1,一开始你位于m点. ...
- IIS反向代理
- complex 类
//定义一个复数类Complex,使得下面的代码能够工作. //Complex c1(3,5)//用复数3+5i初始化c1 //complex c2=4.5//用实数4.5初始化c1 //comple ...
- C语言中存储类别、链接与内存管理
第12章 存储类别.链接和内存管理 通过内存管理系统指定变量的作用域和生命周期,实现对程序的控制.合理使用内存是程序设计的一个要点. 12.1 存储类别 C提供了多种不同的模型和存储类别,在内存中 ...
- linux中文件压缩与打包
一.常见的压缩命令 在linux环境中,压缩文件的扩展名大多是*.tar,*.tar.gz,*.tgz,*.gz,*.Z,*.bz2,首先我们来介绍以下这些压缩文案的扩展名:. *.Z:compres ...
- window.open()总结
今天找父页面和子页面调去问题. 父页面js 1.打开子页面 可以设置子页面长宽高和位置 win= window.open(url, "", "top=45,left=20 ...
- php和c++自带的排序算法
PHP的 sort() 排序算法与 C++的 sort() 排序算法均为不稳定的排序算法,也就是说,两个值相同的数经过排序后,两者比较过程中还进行了交换位置,后期开发应主要这个问题