对axios的理解
axios是基于promise的,可以使用promise api
axios的请求方式
axios(config)
axios.request(config)
axios.get(url [,config])
axios.post(url [,data [,config]])
axios.put(url [,data [,config]])
axios.delete(url [,config])
axios.patch(url [,data [,config]])
axios.head(url [,config])
下面开始axios的案例
对于get请求的案例
//执行GET请求
import axios from 'axios'
axios.default.baseURL = 'http://localhost:3000/api/products'
axios.get('/user?ID=12345') //返回的是一个Promise
.then(res=>console.log(res))
.catch(err=>console.log(err)); //可配置参数的方式
axios.get('/user',{
params:{
ID:12345
}
}).then(res=>console.log(res))
.catch(err=>console.log(err));
发送post请求
//发送post请求
axios.post('/user',{
firstName: 'simon',
lastName:'li'
}).then(res=>console.log(res))
.catch(err=>console.log(err));
并发请求
//发送多个请求(并发请求),类似于promise.all,若一个请求出错,那就会停止请求
const get1 = axios.get('/user/12345');
const get2 = axios.get('/user/12345/permission');
axios.all([get1,get2])
.then(axios.spread((res1,res2)=>{
console.log(res1,res2);
}))
.catch(err=>console.log(err))
最基本的使用方法
//发送post请求
axios({
method: 'post', //请求方式,默认是get请求
url:'/user/12345', //地址
data:{ //参数
firstName: 'simon',
lastName: 'li'
}
});
创建一个实例
const instance = axios.create({
baseURL: 'http://localhost:3000/api/products',
timeout: 1000,
headers: {'X-Custom-Header':'foobar'}
});
//instance的使用
instance.get('/user',{
params:{ID:12345}
}).then(res=>console.log(res))
.catch(err=>console.log(err))
config的配置选项
{
//服务器的地址,是必须的选项
url: '/user', //请求的方式,若没有则默认是get
method:'get', //如果url不是绝对地址,则会加上baseURL
baseURL: 'http://localhost:3000/', //transformRequest允许请求的数据在发送至服务器之前进行处理,这个属性只适用于put、post、patch方式
//数组的最后一个函数必须返回一个字符串或者一个'ArrayBuffer'或'Stream'或'Buffer' 实例或'ArrayBuffer','Formdata',
//若函数中用到了headers,则需要设置headers属性
transformRequest: [function(data,headers){
//根据需求对数据进行处理
return data;
}], //transformResponse允许对返回的数据传入then/catch之前进行处理
transformResponse:[function(data){
//依需要对数据进行处理
return data;
}], //headers是自定义的要被发送的信息头
headers: {'X-Requested-with':'XMLHttpRequest'}, //params是请求连接中的请求参数,必须是一个纯对象
params:{
ID:12345
}, //paramsSerializer用于序列化参数
paramsSerializer: function(params){
return Qs.stringify(params,{arrayFormat:'brackets'});
}, //data是请求时作为请求体的数据——request.body
//只适用于put、post、patch请求方法
//浏览器:FormData,File,Blob;Node:stream
data:{
firstName: 'simon',
}, //timeout定义请求的时间,单位是毫秒,如果请求时间超过设定时间,请求将停止
timeout:1000, //withCredentials表明跨跨域请求书否需要证明。
withCredentials:false, //默认值 //adapter适配器,允许自定义处理请求
//返回一个promise
adapter:function(config){
/*...*/
}, //auth表明HTTP基础的认证应该被使用,并提供证书
auth:{
username:'simon',
password:'123456',
}, //responseType表明服务器返回的数据类型,这些类型包括:json/blob/document/ arraybuffer/text/stream
responseType: 'json', //proxy定义服务器的主机名和端口号
//auth属性表明HTTP基本认证应该跟proxy相连接,并提供证书
//这将设置一个'Proxy-Authorization'头(header),覆盖原来自定义的
proxy:{
host:127.0.0.1,
port:8080,
auth:{
username:'simon',
password:'123456'
}
}, //取消请求
cancelToken: new CancelToken(cancel=>{})
}
设置默认设置
import axios from 'axios'
axios.default.baseURL = 'http://localhost/api/';
axios.default.headers.common['Authorization'] = AUTH_TOKEN;
实例化axios后再添加默认操作,不影响其他axios
const instance = axios.create({
//创建实例时就进行默认设置
baseURL: 'http://localhost:3000/api',
});
//在实例外进行默认设置
instance.default.headers.common['Authorization'] = AUTH_TOKEN;
设置优先级--设置是可以被覆盖的,越往后优先级越高,后面会覆盖前面的设置
import axios from 'axios'
axios.default.timeout = 1000; //全局默认设置
const instance = axios.create({
timeout: 2000, //实例默认设置
});
//请求时的默认设置
instance.get('/users/123456',{
timeout: 3000, //最后这个设定的时间会生效
}).then(/*....*/).catch(/*....*/)
一个请求的返回信息(响应信息)包括一下信息
{
//data是服务器提供的响应
data:{}, //服务器返回的http状态码
status: 200, //statusText是服务器返回的http状态信息
statusText: 'ok', //heades是服务器响应中携带的headers
headers:{}, //config是axios进行的设置,目的是为了请求(request)
config:{},
} //使用then后,response中将包含上述信息
axios.get('/user/12345').then(response={
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
对于axios的请求拦截和响应拦截---拦截可以对数据做一些处理,比如给请求数据添加头部信息,或对响应数据进行序列化,然后再传给浏览器,这些都可以在拦截器中进行
在请求拦截中,错误拦截较少,通常都是配置相关的拦截
在响应拦截中,若成功,则主要是对数据进行过滤;若失败,则可以根据starus判断报错的状态码,来跳转到不同的错误提示页面
//添加一个请求拦截器
axios.interceptors.request.use(config=>{
//在请求之前做一些事
return config;
},err=>{
//请求错误的时候做一些事
return Promise.reject(err);
}); //添加一个响应拦截器
axios.interceptors.response.use(response=>{
//对返回的数据做一些处理
reutrn response;
},err=>{
//对返回的错误做一些处理
return Promise.reject(err);
});
//移除拦截器
const myInterceptor = axios.interceptors.request.use(config=>{return cofig})
axios.interceptors.request.eject(myInterceptor); //在一个axios实例中使用拦截器
var instance = axios.create();
instance.interceptors.request.use(function(){/*...*/});
错误处理--使用validateStatus
设置选项自定义HTTP状态码的错误范围
axios.get('user/12345',{
validateStatus:function(status){
return status < 500;//当返回码小于等于500时视为错误
}
});
取消请求---可以使用cancel token取消一个请求,当用户搜索时,可能需要频繁的发送数据查询请求,因此当发送下一个请求时 ,需要撤销上一个请求。因此需要取消请求。
const CancelToken = axios.CancelToken;
//使用CancelToken.source工厂函数创建一个cancel token
const source = CancelToken.source(); axios.get('/user/12345',{
cancelToken: source.toke
}).catch(thrown=>{
if(axios.isCancel(thrown)){
console.log('Request canceled', thrown.message);
}else{
//handle error
}
}); //取消请求
source.cancel('操作被用户取消');
文章引用:
对axios的理解的更多相关文章
- axios简单理解
发起一个GET请求 直接使用axios('/user')方法,axios()方法默认为GET方式 axios(’/user/12345’); 使用axios.get()方法,参数直接写以?key=va ...
- axios学习和使用
网络请求的方式 传统的Ajax,基于XMLHttpRequest(不推荐) 配置调用方式混乱(回调地狱) jQuery-Ajax (在vue开发中不推荐) 相对于传统的Ajax非常好用 但是jQuer ...
- axios 是如何封装 HTTP 请求的
原载于 TutorialDocs 网站的文章<How to Implement an HTTP Request Library with Axios>.译者:zhangbao90shttp ...
- 【vue+axios】一个项目学会前端实现登录拦截
原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...
- 搭建vue环境
1. 下载安装nodejs 截至2018-06-05 最新稳定版本为 8.11.2,直接 next ,不改目录. PS C:\Users\Administrator> node -v v8.11 ...
- vue项目构建实战基础知识:SPA理解/RESTful接口介绍/static目录配置/axios封装/打包时map文件去除
一.SPA 不是指水疗.是 single page web application 的缩写.中文翻译为 单页应用程序 或 单页Web应用,更多解释请自行搜索. 所有的前端人员都应该明白我们的页面的 u ...
- 理解 ajax、fetch和axios
背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...
- vue+vux+axios+vuex+vue-router的项目的理解
本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
随机推荐
- Dubbo 的设计思想
在java远程调用多年的沉淀 <1>首先是socket调用.在orderService中开放socket服务,在userService中进行远程调用. 优点:解决了单机调用的问题. 缺点: ...
- Proximal Algorithms 2 Properties
目录 可分和 基本的运算 不动点 fixed points Moreau decomposition 可分和 如果\(f\)可分为俩个变量:\(f(x, y)=\varphi(x) + \psi(y) ...
- SpringBoot文章合集
SpringBoot文章合集 SpringBoot合集为<尚硅谷雷神SpringBoot2零基础入门(spring boot2)>的学习以及项目中使用知识点进行整理. SpringBoot ...
- Pytest_定制allure报告(12)
定制报告需要先导入allure模块,再使用以下装饰器方法: feature: 标注主要功能模块. story: 标注feature功能模块下的分支功能. description:在报告中显示用例描述. ...
- 35个JAVA性能优化总结
原文链接:http://mp.weixin.qq.com/s/J614jGM_oMrzdeS_ivmhvA 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对 ...
- js实现工具函数中groupBy数据分组
数据 this.tableData = [ {id: 1, name: '测试', number: 1, price: 0}, {id: 2, name: '测试', number: 1, price ...
- python驱动SAP完成数据导出(二)
在上一篇 python驱动SAP完成数据导出(一)中,我们提到了数据导出前,SAP布局的重要性,如何识别当前布局模式,以及如何切换到想要的布局.本篇小爬将着重讲讲数据导出的注意事项. 我们可以通过如下 ...
- 钓鱼攻击之远程加载恶意Word模版文件上线CS
0x00 前言 利用Word文档加载附加模板时的缺陷所发起的恶意请求而达到的攻击目的,所以当目标用户点开攻击者发给他的恶意word文档就可以通过向远程服务器请求恶意模板并执行恶意模板上的恶意代码.这里 ...
- Android官方文档翻译 八 2.1Setting Up the Action Bar
Setting Up the Action Bar 建立Action Bar This lesson teaches you to 这节课教给你 Support Android 3.0 and Abo ...
- java计算器(简单版)
前言 之前在学习完Java的方法后,我发现自己可以开始写计算器这个"经典"的项目了,于是我花了一点时间写下了这个计算器的程序,也写下了这篇文章. 在这里,我需要说明一下,这个程序只 ...