对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 ...
随机推荐
- Kernel PCA and De-Noisingin Feature Spaces
目录 引 主要内容 Kernel PCA and De-Noisingin Feature Spaces 引 kernel PCA通过\(k(x,y)\)隐式地将样本由输入空间映射到高维空间\(F\) ...
- [炼丹术]EfficientDet训练模型学习总结
EfficientDet训练模型学习总结 1.Introduction简介 pytorch用SOTA实时重新实现官方EfficientDet,原文链接:https : //arxiv.org/abs/ ...
- Java初学者作业——输入一个五位数字,计算各位数字之和并输出,运行结果为五个数字之和(实践2)
返回本章节 返回作业目录 需求说明: 编写Java程序,输入一个五位数字,计算各位数字之和并输出,运行结果为五个数字之和. 实现思路: (1)声明变量num,用于存储用户输入的数字. (2)通过Sca ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷⑤——简单分类菜单
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 1.使用Jquery和JavaScript实现二级分类菜单管理 ...
- Linux密码文件介绍
1. 查看shadow文件内容```cat /etc/shadow```可以看到shadow文件内容,例如:```root:$1$Bg1H/4mz$X89TqH7tpi9dX1B9j5YsF.:148 ...
- BOM 点击触发 倒计时发送验证码案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vuex从后台数据后页面已完成渲染无法显示数据的解决办法
一.在store中state定义一个变量 来控制是否显示 二.在完成数据获取后把isShow设为true 三.把state状态映射到页面的computed中 四.在模板中使用v-if来判断是否显示 来 ...
- android 报错 net::ERR_CLEARTEXT_NOT_PERMITTED
这是从27版本后不允许使用http方式来请求 ,需要使用https 解决办法: 加入一个开关即可 android:usesCleartextTraffic="true"
- CentOS6.5安装CM5.13
注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6610650059971232269/ 安装好虚拟机(2个节点) YUM源已安装好.系统版本CentOS6.5.ja ...
- MongoDB之几种情况下的索引选择策略
一.MongoDB如何选择索引 如果我们在Collection建了5个index,那么当我们查询的时候,MongoDB会根据查询语句的筛选条件.sort排序等来定位可以使用的index作为候选索引:然 ...