[TOC]
接⼝⽂档： edu-front-boot

http://eduboss.lagou.com/front/doc.html#/home

edu-boss-boot

http://eduboss.lagou.com/boss/doc.html#/home

封装请求模块

项⽬中我们需要通过接⼝进⾏数据请求，为了便于操作，我们要封装⽤于请求操作的函数。

在 Vue.js 中通常搭配 Axios 进⾏ AJAX 请求操作，⾸先来安装 Axios。

npm install axios

在 utils/ 中创建 request.js ⽂件作为请求功能模块，在⽂件中引⼊ Axios。

// utils/request.js // 引⼊ axios import axios from ‘axios’ // axios.create() 可以使⽤⾃定义配置新建⼀个 axios 实例 const request = axios.create({}) export default request 观察发现接⼝的基地址有2个，每次请求接⼝书写完整地址较为繁琐。 // App.vue

这时可以给 request 设置拦截器来判断 url 前缀，再将对应基地址设置给 config.baseURL。

axios 具有请求拦截器与响应拦截器，⽤于在请求与响应前进⾏提前处理。 请拦截器参数 config 为本次请求的相关配置信息，这⾥通过 baseURL 来修改请求的基地址。 操作完毕，最后⼀定要返回 config 让配置修改⽣效，否则请求⽆法发送成功。 // request.js // 封装 URL 基地址检测函数 function getBaseURL (url) { if (url.startsWith(‘/boss’)) { return ‘http://eduboss.lagou.com‘ } else { return ‘http://edufront.lagou.com‘ } } // 设置请求拦截器 request.interceptors.request.use(function (config) { // 根据请求的 URL 判断基地址，设置给 config.baseURL config.baseURL = getBaseURL(config.url) return config })

再次请求时前缀设置为 /boss 或 /front 即可。（测试后删除）

// App.vue request({ method: ‘GET’, // 某个后台接⼝ // url: ‘/boss/v2/api-docs?group=edu-boss-boot’ // 某个前台接⼝ url url: ‘/front/ad/getAdList’ }).then(res => { console.log(‘响应内容：’, res) })