axios的理解和使⽤ate（对axios请求进⾏⼆次封装）
取消请。。。
axios 的理解和使⽤ ate(对axios请求进⾏⼆次封装) 取消请求(axios.CancelToken)
原⽂链接：
⽬录
axios是什么
1. 前端最流⾏的 ajax请求库
2. react/vue官⽅推荐使⽤axios发ajax请求
3. ⽂档
axios特点
1. 基于promise的异步ajax请求库
2. 浏览器端/node端都可以使⽤
3. ⽀持请求/响应
4. ⽀持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求
axios常⽤语法
nam value
axios(config)通⽤/最本质的发任意类型请求的⽅式
axios(url[,config])可以只指定url发get请求
<(url[,config])发get请求
axios.delete(url[,config])发delete请求
axios.put(url[,data,config])发put请求
nam value
请求⾮默认全局配置
quest.use()添加请求
sponse.use()添加响应
axios.Cancel()⽤于创建取消请求的错误对象axios.CancelToken()⽤于创建取消请求的token对象axios.isCancel()是否是⼀个取消请求的错误
axios.all(promise)⽤于批量执⾏多个异步请求
axios安装
npm install axios
为什么要用ajax
1
vue项⽬使⽤
在main.js
import axios from 'axios'
Vue.prototype.$ajax = axios
1
2
html 直接导⼊就⾏了
<script src="cdn.bootcss/axios/0.19.0/axios.js"></script>
1
axios简单使⽤
默认get请求
// 配置默认基本路径
axios.defaults.baseURL = 'localhost:3000'
// 默认get请求
axios({
url:"/posts",
params:{
id:1
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
post
// post请求
axios.post("/posts",{id:1}).then(res=>{
},err=>{
console.log(err)
})
// 或
axios({
url:"/posts",
method:'post'
data:{
id:1
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
put
axios.put("/posts/4",{
"title": "json-server---1",      "author": "typicode",
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
// 或
axios({
url:"/posts",
method:'put '
data:{
"title": "json-server---1",      "author": "typicode",
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
delete
axios.delete("/posts/4",{
"title": "json-server---1",      "author": "typicode",
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
// 或
axios({
url:"/posts",
method:'delete'
data:{
id:1
}
}).then(res=>{
console.log(res)
},err=>{
console.log(err)
})
axios难点语法
1. 根据指定配置创建⼀个新的 axios ，也就是每个axios 都有⾃⼰的配置
2. 新的 axios 只是没有取消请求和批量请求的⽅法，其它所有语法都是⼀致的
3. 为什么要这种语法？
1. 需求，项⽬中有部分接⼝需要的配置与另⼀部分接⼝的配置不太⼀样
2. 解决：创建2个新的 axios ，每个都有⾃⼰的配置，分别对应不同要求的接⼝请求中简单使⽤
const instance = ate({
baseURL:"localhost:3000"
})
// 使⽤instance发请求
instance({
url:"/posts"
})
// 或
<("/posts")
同时请求多个端⼝号
const instance = ate({
baseURL:"localhost:3000"
})
const instance2 = ate({
baseURL:"localhost:4000"
})
// 同时请求端⼝号 3000 4000
// 使⽤instance发请求
instance({
url:"/posts"
})
// 使⽤instance2发请求
instance2({
url:"/posts"
})
axios的处理链流程
简单使⽤
// 添加请求
quest.use(config=>{
// config 请求配置
console.log("请求")
return config
},err=>{
ject(err)
})
// 添加响应
sponse.use(res=>{
// res 响应结果
console.log("响应")
},err=>{
ject(err)
})
console.log("开始请求")
<("localhost:3000/posts") .then(res=>{
console.log("res:",res)
console.log("请求结束")
})
多个
请求后添加先执⾏
// 添加请求
quest.use(config=>{    console.log("请求")
return config
},err=>{
ject(err)
})
quest.use(config=>{    console.log("请求--------2")
return config
},err=>{
ject(err)
})
quest.use(config=>{    console.log("请求--------3")
return config
},err=>{
ject(err)
})
// 添加响应
sponse.use(res=>{    console.log("响应")
return res
},err=>{
ject(err)
})
sponse.use(res=>{    console.log("响应---------2")
return res
},err=>{
ject(err)
})
sponse.use(res=>{    console.log("响应----------3")
return res
},err=>{
ject(err)
})
console.log("开始请求")
<("localhost:3000/posts") .then(res=>{
console.log("res:",res)
console.log("请求结束")
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。