对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 ...
随机推荐
- SpringMVC+Spring+Mybatis实现登录注册Demo
使用环境:MyEclipse/Eclipse + Tomcat + MySql. 使用技术:SpringMVC + Spring + Mybatis. 实现效果 登录页面: 密码错误提示 登录成功后 ...
- 编写Java程序,定义一个类似于ArrayList集合类
返回本章节 返回作业目录 需求说明: 设计一个类似于ArrayList的集合类ListArray. ListArray类模拟实现动态数组,在该类定义一个方法用于实现元素的添加功能,以及用于获取List ...
- Flask + UnitTest(十五)
被测试视图 # coding:utf-8 from flask import Flask, request, jsonify app = Flask(__name__) @app.route(&quo ...
- ConfigParser_读取配置文件信息
ConfigParse简介 ConfigParser 在python中是用来解析配置文件的内置模块,直接导入使用 import configparser 使用该模块可以对配置文件进行增.读.改.删操作 ...
- PowerShell 管道符之Select的使用方法【一】
之前我文章中我们略微提到过管道符的操作,但并不多,这篇主要讲解一下详细的使用方法 假设我们要对数组中的数字1-10中我想要从右往左换句话说就是从字符串最后一个字开始倒过来往前数截取6个子字符串时可以这 ...
- react子组件向父组件传值
子组件向父组件传值,注意父组件传递函数的时候必须绑定this到当前父组件(handleEmail={this.handleEmail.bind(this)}),不然会报错 /***实现在输入框输入邮箱 ...
- 最完整的springboot2.2.x.RELEASE整合springDataElasticsearch 7.6.2
本文使用内容 springBoot2.2.5.RELEASE版本 Elasticsearch7.6.2 linux版本的 SpringDataElasticSearch与Springb ...
- 利用quake捡洞
quake一开漏洞全靠捡 定位资产 通过主域名定位子域名资产 domain:"target.com" 通过C段定位资产 ip: "1.1.1.1/24" 通过证 ...
- WEB开发的相关知识(Tomcat)
Internet上供外界访问的Web资源分为 静态web资源(如html 页面):指web页面中供人们浏览的数据始终是不变. 动态web资源:指web页面中供人们浏览的数据是由程序产生的,不同时间点访 ...
- GIL全局解释器锁、死锁现象、python多线程的用处、进程池与线程池理论
昨日内容回顾 僵尸进程与孤儿进程 # 僵尸进程: 所有的进程在运行结束之后并不会立刻销毁(父进程需要获取该进程的资源) # 孤儿进程: 子进程正常运行 但是产生该子进程的父进程意外死亡 # 守护进程: ...