对接口后端的接口文档之后

封装请求模块

项目中我们需要通过接口进行数据请求，为了便于操作，要封装用于请求操作的函数，那么在Vue.js中，我们通常是使用Axios进行AJAX请求操作的，首先，就来安装Axios吧

npm i axios

在utils目录下，创建request.js文件，作为请求功能模块，在文件中引入Axios

// utils/request.js
import axios from 'axios'

// 创建axios实例
const request = axios.create({
})

export default request

显而易见，每次请求接口的基地址都有2个，每次请求接口书写完整地址就非常的繁琐

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

• axios具有请求拦截器和响应拦截器，用于在请求与响应前进行提前处理
• 请拦截器config为本次请求的相关配置信息，这里通过baseURL来修改请求的基地址
• 操作完毕之后，一定要返回config让配置生效，否则请求无法成功

import axios from 'axios'

// 创建axios实例
const request = axios.create({
})

// 封装URL基地址检测函数
function getBaseURL (url) {
  if (url.startsWith('/这里是后台接口的前缀')) {
    return '这里是后台接口的服务URL'
  } else {
    return '这里是前台接口的服务URL'
  }
}

// 设置请求拦截器
request.interceptors.request.use(function (config) {
// 判断config.url的前缀是什么，然后进行请求baseURL的设置
  config.baseURL = getBaseURL(config.url)
  return config
})

export default request

测试请求，测试后可删除

// App.vue
<script>
import request from '@/utils/request'

request({
  method: 'GET',
  // 请求某个前台接口
  url: '/front/ad/getAdList',
  // 请求某个后台数接口
  // url: '/boss/v2/api-docs?group=edu-boss-boot'
}).then(res => {
  console.log(res)
})
export default {
}
</script>