axios的基本使用
axios 是什么?
Axios 是专注于网络数据请求的库。
相比于原生的 XMLHttpRequest 对象，axios 简单易用。
相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。
文档: https://github.com/axios/axios
axios 特点:
1. 基于 xhr + promise 的异步 ajax 请求库
2. 浏览器端/node 端都可以使用
3. 支持请求／响应拦截器
4. 支持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求
axios常用语法：
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
---------------------------------------------------------------------------------
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法
基本使用：
axios发送get请求：
axios.get('url地址', { params: {请求的参数对象}}).then(function(res){
//.then()表示成功的回调
console.log(res.data) //res.data 是服务器返回的数据,会自动转为js对象格式
})
-------------------------------------------------------------------------------------------
axios发送post请求：
axios.post('url地址', {要提交到服务器的数据}).then(function(res){
console.log(res.data) //res.data 是服务器返回的数据
})
-------------------------------------------------------------------------------------------
直接使用axios发起请求:
axios({
method: '请求类型',
url: '请求的URL地址',
data: { POST数据 }, //POST 数据要通过data属性提供
params: { GET参数 } //GET参数要通过params属性提供
}) .then(function(res){
console.log(res.data)
})
默认配置：
axios.defaults.method="post" //设置默认的请求类型
axios.defaults.baseURL="XXX" //设置默认url地址
axios.defaults.XXX=XXX //设置XXX的默认配置为XXX
axios({
....
}).then(function(res){
console.log(res.data)
})axios创建实例发送请求：
const a=axios.create({
//创建实例对象
})
a({
method:"post",
url:"xxx",
data:{}
}).then(function(res){
console.log(res)
}) //这里实例对象与axios功能几乎是一样的
//axios 实例只是没有取消请求和批量发请求的方法, 其它所有语法都是一致的axios请求响应结果的结构：
config:配置对象
data:响应体结果
headers:响应体信息
request:原生ajax对象
status:响应状态码
statusText:响应状态字符串
axiios取消请求:
var one=document.getElementById("one")
var two=document.getElementById("two") //获取按钮
let cancel=null //声明全局变量
//发送请求
one.onclick=function(){
axios({
method:"post",
url:"xxx",
//添加配置对象的属性
cancelToken:new axios.CancelToken(function(c){
cancel=c //将c的值赋值给cancel
})
}).then(function(res){
console.log(res.data)
})
}
//取消请求
two.onclick=function(){
cancel()
}axios拦截器(可以在发送请求时或响应的时候做一下操作)：
//设置请求拦截器
axios.interceptors.request.use(function (config) {
console.log("请求拦截器成功") //condig是配置对象
return config;
}, function (error) {
console.log("请求拦截器失败")
return Promise.reject(error);
});
//设置响应拦截器
axios.interceptors.response.use(function (response) {
console.log("响应拦截器成功") //response是响应结果
return response;
}, function (error) {
console.log("响应拦截器失败")
return Promise.reject(error);
});
axios({
method:"get",
url:"url地址"
}).then(res=>{
console.log(res)
})
//分别输出：请求拦截器成功 响应拦截器成功 res的值 //设置请求拦截器
axios.interceptors.request.use(function (config) {
console.log("请求拦截器成功")
throw "出问题了" //如果抛出异常会返回一个失败的promise
}, function (error) {
console.log("请求拦截器失败")
return Promise.reject(error);
});
//设置响应拦截器
axios.interceptors.response.use(function (response) {
console.log("响应拦截器成功")
return response;
}, function (error) {
console.log("响应拦截器失败")
return Promise.reject(error);
});
axios({
method:"get",
url:"http://www.liulongbin.top:3006/api/getbooks"
}).then(res=>{
console.log(res)
}).catch(res=>{
console.log(res)
})
//分别输出：请求拦截器成功 响应拦截器失败 出问题了