三步对 axios 做一个request 封装实例,新手也能学会,有手就行
对 axios 做一个简单的封装,基于这个实例,相信再做复杂的封装也不是难事,初学者必看
·
众所周知,把接口直接放在views中是一种犯罪,每次维护都需要费力去找,为了方便维护(摸鱼),我们必须做一个封装。
- 在 /src 下建一个 /utils 文件夹,里面创建 request.js 和 api.js 两个文件。
- request .js 中用来做拦截文件,api.js则用来管理整个项目的接口。
- 在需要使用axios的页面中,按需引入。
此处使用的两个接口为: baseURL: http://www.pudge.wang:3080/api
首页数据(get): /rated/list
详情页数据(post): /movies/detail
1.request.js页面
//request.js页面 用来做拦截的文件
//引入axios
import Vue from "vue";
import axios from "axios";
Vue.use(axios);
// 1.创建一个单例(实例)
const instance = axios.create({
//一个接口前的统一地址
baseURL: "http://www.pudge.wang:3080/api",
//超时的时间
timeout: 4000,
});
// 拦截器 - 请求拦截
instance.interceptors.request.use(
(config) => {
// 部分接口需要拿到token
let token = localStorage.getItem("token");
if (token) {
//有token的话,就给headers中带上token,因为后端的token未必就叫做'token'
//所以写成对象,即把token赋值给'a-token'
config.headers = {
"a-token": token,
};
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
// 拦截器 - 响应拦截
instance.interceptors.response.use(
(res) => {
return res;
},
(err) => {
return Promise.reject(err);
}
);
//整体暴露
export default instance;
2. api.js 页面
//用于管理整个项目的接口
//首先需要将 request.js 整体导入
import request from "@/utils/request.js";
//然后按需导出每个api
//请求首页数据(get请求)
export const GetHomeApi =()=>request.get('/rated/list');
// 请求详情页数据 post
// 因为 post请求需要参数,所以添加params
export const PostDetailApi =(params)=>request.post('/movies/detail',params);
3. 使用axios的页面,此处为 AxiosView.vue页面
<template>
<div>
<h2>这是 axios 的页面</h2>
<button @click="getData()">getData</button>
<button @click="postData()">postData</button>
</div>
</template>
<script>
//从 api.js 中,按需导入 GetHomeApi, PostDetailApi 这两个请求
import { GetHomeApi, PostDetailApi } from "@/utils/api.js";
export default {
data() {
return {};
},
methods: {
getData() {
//因为后缀的参数在api.js中,如果需要改动的话直接去找GetHomeApi
GetHomeApi().then((res) => {
console.log(res.data.result);
});
},
postData() {
//将{id: "1228788",}作为参数,传递给PostDetailApi的 params
PostDetailApi({
id: "1228788",
}).then((res) => {
console.log(res.data.result);
});
},
},
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)