[JavaScript知识库]vue项目中请求接口封装

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>