在vue2项目封装API模块和请求封装模块

第一步创建一个放基地址/请求拦截器/相应拦截器的文件

utils/request.js文件中

/* 
1,安装axios
2，导入axios
3，设置axios及地址（axios.create（{}））
4，加入请求拦截与相应拦截
5，暴漏出去
6，导入调用(api/模块.js中导入使用)
*/

import axios from "axios"    //导入

const _axios = axios.create({
  baseURL:'http://119.91.150.211:3000/api'
})

// 请求拦截
_axios.interceptors.request.use((config) =>{
  return config
},(err) =>{
  return Promise.reject(err)
})

// 相应拦截
_axios.interceptors.response.use((res) =>{
  return res
},(err) =>{
  return Promise.reject(err)
})

export default _axios

第二步,在api里封装对应的请求 然后暴漏出去

api/test.js  在api下建立一个放对应模块请求的文件

//第一步导入及地址
import request from '@/utils/request'

/* 暴漏出去一个 登录的接口 */
export const sysLogin = () =>{
return request({
    url:'/sys/login',
    method:'post',
    data:{
        mobile:'13800000002',
        password:'123456'
    }
})
}

第三步 调用api中的接口实现发送请求

在.vue文件中
<template>
  <div>
    <button @click="btnClick">接口请求</button>
  </div>
</template>
<script>
// 第一步导入 对应的登录接口api文件
import { sysLogin } from '@/api/test';
export default {
  methods: {
    async btnClick() {
      const res = await sysLogin()
      console.log(res);
    }
  }
}
</script>

就可以实现 在vue中的基本 请求操作了  要注意的就是跨域问题了