axios的拦截器原理如下所示:
axios请求的相关代码放置于:src→utils→request.js. request.js基于axios的封装,便于处理统一处理POAT,GET等请求参数,请求头,以及错误提示信息等。具体可以参考:和服务端进行交互 | vue-element-admin。或者https://github.com/PanJiaChen/vue-element-admin/blob/master/src/utils/request.js
import axios from 'axios' //导出一个axios的实例,并且这个实例要有请求拦截器,响应拦截器
const service = axios.create() //创建一个axios的实例
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
export default service //导出axios实例
为了方便管理维护,我们习惯将所有的网络请求放置于scr→api 目录下统一管理,按照模块经行划分。
例如以下是一个封装用户模板登录的请求接口:
在其他组件中调用该登录的接口,步骤如下
<script>
// 1. 引入login
import {login} from "@/api/user";
export default {
data(){
return{}
},
methods: {
async LoginBut() {
// 2. 调用接口login
cosnt{data}=await login()
}
}
}
</script>