原来这就是axios啊
1. axios的基本特质axios是基于Promise用于浏览器和node.js的HTTP客户端。axions的基本特征在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API能拦截请求和响应自动转换为JSON格式能转换请求和响应数据2. axios基本用法第一步导入axios通过命令安装axiosnpm install axios
1. axios的基本特质
axios是基于Promise用于浏览器和node.js的HTTP客户端。
axions的基本特征
- 在浏览器中发送 XMLHttpRequests 请求
- 在 node.js 中发送 http请求
- 支持 Promise API
- 能拦截请求和响应
- 自动转换为JSON格式
- 能转换请求和响应数据
2. axios基本用法
第一步导入axios
通过命令安装axios
npm install axios --save
第二步将axios导入main.js入口文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
Vue.prototype.$axios = axios //将axios 挂载到Vue原型上 这样我们在组件中只需要this.$axios即可操作axios方法
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
第三步在组件中使用axios
//请求地址来自B站 ilovecoding老师的Vue教程
//axios 默认get请求方式 其他请求方式需在url同级下 定义method
this.$axios({
url: "http://123.207.32.32:8000/home/multidata" ,
method:"get"
}).then(
(res) => {
console.log(res);
},
(err) => {
console.log(err);
}
);
3. axios 发送并发请求
虽然不常用,但在一些特定的场合,我们可能需要同时发送两个请求。
axios.all 和promise.all方法类似,参数是一个数组,里面可以存放多个请求。返回值也是一个数组,数组内的每个元素与请求参数按顺序一一对应。
created() {
let get1 = this.$axios({ url: "http://123.207.32.32:8000/category" });
let get2 = this.$axios({
url: "http://123.207.32.32:8000/home/multidata",
methos: "get",
// 请求时传入的参数
params: {
type: "sell",
page: 1,
},
});
this.$axios.all([get1, get2]).then(
// axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
this.$axios.spread((res1, res2) => {
console.log(res1);//第一个请求返回
console.log(res2);//第二个请求返回
})
);
},
4. axios响应结果的主要属性
属性 | 说明 |
---|---|
data | 实际响应的数据 |
headers | 响应头的信息 |
status | 响应状态码 |
status-Text | 响应状态信息 |
响应图:
开发者工具(浏览器F12)中的Network中也可以查看,如果发生错误,方便我们准确定位。
5. axios全局配置
项目开发中,我们很多的请求参数是固定的,可以抽取这些参数出来,进行全局配置。
5.1 axios配置部分配置项
this.$axios({参数配置})
参数配置 | 说明 |
---|---|
url | 请求地址 |
baseURL | 请求根路径(一般全局配置) |
method | 请求类型 |
headers | 自定义请求头 |
params | URL查询对象 |
timeout | 超时设置(一般在全局中配置) |
6. axios的简单封装
第一步创建封装文件
第二步在main入口文件引入
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyNGtK6d-1616477679326)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a4c3b6dc0da4dbdae591c9e8ad2c02b~tplv-k3u1fbpfcp-watermark.image)]
第三步在组件中使用
7. axios的拦截器
7.1 请求拦截器
作用:在请求发送前进行一些操作。
举例:1.在每个请求体中加上token,在这里统一做了处理以后修改也方便。
2.一个特效就是请求时有个圆圈转啊转的,请求结束图片消失。
![7.拦截器](images/7.拦截器.png)//全局配置请求拦截器
//创建请求拦截器
//axios.interceptors.request.use(请求成功回调,请求失败回调)
axios.interceptors.request.use(config=>{
//里面时请求之前要处理的函数体
//一定要return
return config
},err=>{console.log(err)})
7.2 响应拦截器
作用:接收到响应后进行的操作
//创建响应拦截器
//axios.interceptors.response.use(响应成功回调,响应失败的回调)
axios.interceptors.response.use(res=>{
响应成功后的事件处理函数,
//注意 同样需要return
return res.data
},err=>console.log(err))
更多推荐
所有评论(0)