axios

首先安装axios

npm install axios --save

在src下新建utils文件夹

再新建request.js文件

//utils->request.js
import axios from 'axios'
const requests = axios.create({
  baseURL: process.env.NODE_ENV==="production"?process.env.VUE_APP_SRC:process.env.VUE_APP_BASE_API, 
  timeout: 5000
})

//请求拦截器
requests.interceptors.request.use(
  config => {
      // 在发送请求之前做些什么
      return config;
  },
  error =>{
      // 对请求错误做些什么
      return Promise.reject(error);
  }
);

//响应拦截器
requests.interceptors.response.use(
  response => {
      // 对响应数据做点什么
      return response;
  },
  error => {
      // 对响应错误做点什么
      return Promise.reject(error);
  }
);

export default requests

使用：

//api/getInfo.js
import requests from '@/utils/request'

export function getInfo(data) {
  return requests({
    url: '/list/info',
    method: 'get',
    params:data
  })
}

　　

getData () {
      return new Promise((resolve, reject) => {
        getInfo(this.params).then(response => {
          const { data: res } = response
          console.log(res.data)
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }

　　

　　解决开发环境跨域：

//.env.development
NODE_ENV = 'development'
VUE_APP_BASE_API = '/localApi'
VUE_APP_SRC = 'http://ss.aa.com/'

　

//.env.production
NODE_ENV = 'production'
VUE_APP_BASE_API = '/localApi'
VUE_APP_SRC = 'http://ss.aa.com/'

　

//vue.config.js
module.exports = {
  publicPath: './',
  assetsDir: 'static',
  productionSourceMap: false,
  devServer: {
    hot: true,
    open: false, // 浏览器自动打开
    https: false,
    port: 8080,
    proxy: {
      // 匹配到/localApi开头时 替换成target指定的地址
      '/localApi': {
        // 本地
        target: process.env.VUE_APP_SRC,
        changeOrigin: process.env.NODE_ENV==="development"?true:false, // 开发环境才开启反向代理,生产环境不开启
        pathRewrite: {
          // 把匹配到的/localApi这段开头 替换成 /
          '^/localApi': '/'
        }
      },
    }
  },
}