项目搭建 请求接口封装和全局超时处理

//1.引入相关依赖
import axios from "axios";
import { Toast } from 'vant';
import Vue from 'vue'

// 2.配置服务器地址 超时时间
const $http = axios.create({
    // 公共的请求地址配置在这里
    baseURL: Vue.prototype.IP, // 公司接口地址
    // 请求超时时间（单位ms）
    timeout: 5000
})
//3.配置请求拦截器 
axios.interceptors.request.use(req => { //此处拦截请求，把请求数据处理得更清爽，更简洁，交给后端
  let token = localStorage.getItem('token')
  if (token) {//如果有token,就把token放在请求数据的头部
      req.headers.token=token
  }
  if (req.methods === 'post') {//如果请求的方式是post,那就用qs模块处理掉数据
      req.data=qs.stringify(req.data)
  }
  return req//发送给后端经过处理的值
},error => {
  if(error.message.includes('timeout')){   // 判断请求异常信息中是否含有超时timeout字符串
    Toast('请求超时，请稍后再试')           //使用vant UI组件的 Toast 给予提示
    return Promise.reject(error);        //如果有错就把错误原因返回
  }
  Toast('服务器请求失败，请稍后再试')
  return Promise.reject(error);//如果有错就把错误原因返回
}); 
//4.配置相应拦截器 
axios.interceptors.response.use(res => {//响应拦截器哦
  switch (res.status) {
      case 200:
          return res.data.data//如果是成功的响应，就把最核心的有用的数据返回
  }
}, err => Promise.reject(err)) //如果有错就把错误原因返回
    
// 5.导出接口
//园区概况
export const survey = (data) => $http.get('/basic/facts', {params: data}).then(({ data }) => data)