axios学习笔记
为什么不用jq-ajax?
因为jQurey代码有1w+行,为重量级框架
vue中不需要jQurey
1、特点
//在浏览器中发送XMLHttpRequests请求
//在node.js中发送 http请求
//支持Promise API
//拦截请求和响应
//转换请求和响应数据等等
支持多种请求方式
axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, configl])
axios.patch(url[, data[, configll)
2、安装
npm install axios --save
3、使用
import axios from 'axios'
// axios基础使用
//axios会返回一个promise函数,所以直接调用promise的then和catch即可
axios({
url:'http://123.207.32.32:8000/home/multidata',
// 若不指定method,默认为get
method:'get'
}).then((res)=>{
console.log(res)
})
3.1、基础使用
// axios基础使用
//axios会返回一个promise函数,所以直接调用promise的then和catch即可
axios({
url:'http://123.207.32.32:8000/home/multidata',
// 若不指定method,默认为get
method:'get'
}).then((res)=>{
console.log(res)
})
axios({
url:'http://123.207.32.32:8000/home/data',
method:'get',
// 针对get请求的参数进行拼接
params:{
type:'sell',
page:1
}
}).then((res)=>{
console.log(res)
})
3.2 、处理并发请求
// axios发送并发请求(同时发送多个请求,请求都完成后执行then
axios.all([
axios({
url:'',
method:'get'
}),axios({
url:'',
params:{
name:'',
age:''
}
})]).then((res)=>{
console.log(res)
console.log(res[0])
console.log(res[1])
})
// axios.sprad打开res数组(不常用
axios.all([
axios({
url:'',
method:'get'
}),axios({
url:'',
params:{
name:'',
age:''
}
// axios.sprad可把结果拆开
})]).then(axios.spread((res1,res2)=>{
console.log(res1),
console.log(res2)
}))
3.3 、axios配置信息
3.3.1、单独配置
//3、axios配置
axios({
//baseURL 会拼接至url前
baseURL:'http://123.207.32.32:8000',
// timeout 超时时间、单位豪秒
timeout:5000,
url:'/home/multidata',
// 若不指定method,默认为get
method:'get'
}).then((res)=>{
console.log(res)
})
3.3.2、全局配置
// 对axios进行全局配置
axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000
axios({
url:'/home/multidata',
method:'get'
}).then((res)=>{
console.log(res)
})
3.3.3、 常用配置信息
axios({
baseURL:'http://123.207.32.32:8000',
url:'/home/multidata',
method:'get',
// 请求前的数据处理
transformRequest:[function (data){}],
// 请求后的数据处理
transformResponse:[function(data){}],
// 自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
// url查询参数(get时用)
params:{
id:'12'
},
// 查询对象序列化函数
paramsSerializer:function (params) {},
// 请求体request body (post时用)
data:{
id:'aa'
},
// 超时设置
timeout:1000,
// 跨域是否携带Token
withCredentials:false,
// 自定义请求处理
adapter:function (resolve,reject,config) { },
// 身份验证信息
auth:{uname:'',pwd:'12'},
// 响应的数据格式
// json / blob /document /arraybuffer /text /stream
responseType:'json'
}).then((res)=>{
console.log(res)
})
3.4、创建axios实例 (推荐)
const myaxios1 = axios.create({
baseURL:'www.2twl.com',
timeout:6000
})
myaxios1({
url:'/home',
params:{
id:'qwe112'
}
})
const myaxios2 = axios.create({
baseURL:'www.eeeee.com',
timeout:6000
})
myaxios2({
url:'/about',
params:{
id:'fsa'
}
})
3.5、抽离封装axios
//避免直接在组件中引用第三方插件
//创建network文件夹
//创建需要的文件。如request.js
//统一导入axios
import axios from 'axios'
// 封装axios并导出
export function myrequest1(config) {
//实例化axios
const myaxios = axios.create({
baseURL:'www.baidu.com',
timeout:7000
})
//返回实例化的axios
return myaxios(config)
}
export function myrequest2(config) {
const youaxios = axios.create({
baseURL:'www.baidu.com',
timeout:7000,
})
return youaxios(config)
}
//#########使用
// 导入封装的axios
import {myrequest1,myrequest2} from './network/request'
// 使用封装的axios
myrequest1({
url:'/home',
params:{
id:'123'
}
}).then((res)=>{
console.log(res)
}).catch((err)=>{
console.log(err)
})
//简化理解
myrequest2(config).then().catch()
// |
// V
youaxios(config).then().catch()
3.6、axios拦截器
const myaxios = axios.creat({
baseURL:'www.baidu.com',
timeout:9000
})
//############## 请求拦截
myaxios.interceptors.request.use((config)=>{
console.log(config)
// 放行config
return config
},(err)=>{
console.log(err)
})
//简化理解
myaxios.interceptors.request.use(function1,function2)
//请求拦截的作用
//1、config中的一些信息不符合服务器的要求
//2、每次网络请求的时候,希望页面中显示请求加载图标
//3、某些网络请求必须携带一些特殊的信息(比如登录需要添加token
//############## 响应拦截
myaxios.interceptors.response.use((res)=>{
console.log(res)
console.log(res.data)
//放行res
return res
},(err)=>{
console.log(err)
})
//简化理解
myaxios.interceptors.response.use(function1,function2)
注:
最好不要直接在组件中引用第三方插件