axios 封装和拦截器的使用

**axios 封装 拦截器 **

可以新建一个文件夹 里面写http.js文件中的代码块

import axios from "axios"
import qs from "qs"

//这里用到了拦截器  在这里可以进行 操作    比如touken值的添加，判断请求类型（get/post）以对不同请求方式的操作
axios.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
return Promise.reject(error);
});

class http{
static get(url,params){
return axios.get(url,{params:params})
}
static post(url,params){
return axios.post(url,qs.stringify(params))
}
}
export default http;

//
api.js
在这个文件里面引入http.js文件

这里统一把请求的方法都放在这个文件里面 统一在这里抛出 在用到其中的某个方法的时候引入这个文件 找到要用的方法 下面是一个例子 抛出getSwiper方法 在组件中引入 看下面

import http from "../utils/index"

export function getSwiper(){
return http.get("/api/se?token=1e7f")
}

组件中·

<template>
<div class="switchgood">

</div>
</template>
<script>
//引入方法
import { getSwiper } from "@/api/index.js";
export default {
created(){
//引入的是一个方法   所以要加小括号  如果需要传参的话就直接在括号内
//不需要传参的形式
getSwiper().then((res)=>{
console.log(res)
})
}

//需要传参的形式
const params = {
name:"暖心小豪"，
}
getSwiper(params ).then((res)=>{
console.log(res)
})
}
methods:{

}
}
</script>

但是一般情况下不在created()里面请求数据 方法的一般是在methods()中请求 建议用下面这个方法，（但是上面的方法也可以用） 可以写成一下情况 我拿一个需要传参的方法为例

<template>
<div class="switchgood">
</div>
</template>
<script>
//引入方法
import { getSwiper } from "@/api/index.js";
export default {
created(){
this.getData();
}，
methods:{
getData(){
//需要传参的形式
const params = {
name:"暖心小豪"，
}
getSwiper(params ).then((res)=>{
console.log(res)
})
}
}
}
</script>

• 点赞 2
• 收藏
• 分享
• 文章举报