API 모듈을 캡슐화하고 vue2 프로젝트에서 캡슐화 모듈을 요청합니다.

첫 번째 단계는 기본 주소/요청 인터셉터/해당 인터셉터로 파일을 생성하는 것입니다.

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에서 구현할 수 있는데 주의해야 할 부분은 도메인 간 문제입니다.