安装axios

npm i axios 

axios官网：https://www.axios-http.cn/

1，创建文件夹 utils 存放 request.js 文件

import axios from 'axios'

// 创建一个自己的 axios 实例
const instance = axios.create({
  // 设置基础的 url 例：
  baseURL: 'https://api.example.com',
  // 请求延迟
  timeout: 5000
})

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

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response.data
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

2，创建api文件夹，存放 项目用到的 api请求，举例api：

import instance from '@/utils/request'

export function getLoginImage () {
  return instance({
    method: 'GET', // get请求可以省略此 method
    url: '/captcha/image'
  })
}

export function getDate (data) {
  return instance({
    url: '/captcha/date',
    params: { data }
  })
}

export function postA (data) {
  return instance({
    method: 'POST',
    url: '/ass',
    data: data
  })
}

export function deleteId (id) {
  return instance({
    method: 'DELETE',
    url: '/de',
    params: { id }
  })
}

3，在vue2中调用 api 示例：

// 登录页面
import { getLoginImage } from '@/api/loginApi'

export default {
  name: 'loginIndex',
  methods: {
    async getImage () {
      const image = await getLoginImage()
      console.log(image)
    }
  },
  created () {
    this.getImage()
  }
}