在vue项目中，与API接口交互时，通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等功能 当项目中API接口过多时，方便开发以及接口变更时修改请求地址，推荐将接口进行封装，整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。

安装axios

npm install axios -S 

创建相关目录文件

request.js配置

import axios from 'axios'
import router from "@/router";

export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'https://api.shop.eduwork.cn',
    timeout: 10000
  })
  // 请求拦截器配置
  instance.interceptors.request.use(config => {
      // config.headers.Authorization = window.sessionStorage.getItem('token')
      return config
    }, error => {
      console.log(error)
      return Promise.error(error)
    }
  )
  // 响应拦截器配置
  instance.interceptors.response.use(response => {
    console.log(response)
    return response.data
  }, error => {
    switch (error.response.status) {
      case 401:
        console.log("无权访问")
        router.push({path: '/login'})
        break
      case 403:
        console.log("token过期啦")
        router.push({path: '/login'})
        break
      case 404:
        console.log("404啦")
        router.push({path: '/404'})
        break
      default:
        return Promise.reject(error)
    }
    return Promise.reject(error)
  })
  // 发送真正的网络请求
  return instance(config);
}

export default request

http.js配置

import {request} from './request'

const http = {
  get(url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  put(url, params) {
    const config = {
      method: 'put',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  delete(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.params = params
    return request(config)
  }
}
export default http

home.js配置

按照页面，每个页面创建一个js文件，统一管理api请求方式和地址

import http from './http'

export function getHomeAllData(){
  return http.get('/api/index')
}

vue组件发起请求

<template>
  <h1>首页</h1>
</template>

<script>
import {onMounted} from 'vue'
import {getHomeAllData} from '@/api/home'

export default {
  name: 'Home',
  components: {},
  setup() {
    onMounted(() => {
      getHomeAllData().then((response) => {
        console.log('正常响应')
        console.log(response)
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    })
  }
}
</script>