axios基础封装,将请求接口放在同一个js文件

1.src目录下,新建文件夹utils,在utils内新建request.js

import axios from 'axios'   //安装axios并引入
const autograph = function auths (url, query) {
  var headers = {
    'Content-Type': 'application/json;charset=UTF-8'
  }
  return { query, headers }
}
// 创建axios实例
const service = axios.create({
//请求的地址,也可根据代码配置获取,具体网上查找开发环境的地址
 baseURL:'https://elm.cangdu.org/v1', 
//延迟
  timeout: 15000
})

// request 拦截器,这些直接复制粘贴,都是死的代码,若想更丰富,懂了之后可以添加更多的精彩
service.interceptors.request.use(function(config) {
  const data = autograph(config.url, config.data)
  if (config.method === 'get') {
    config.params = data.query
  }

  if (config.method === 'post') {
    config.data = data.query
  }

  config.headers = data.headers
  return config
}, error => {
  console.log(error) // for debug
  Promise.reject(error)
})

// response 拦截器
service.interceptors.response.use(
  response => {
console.log(response)
    return response
  },
  error => {
    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
      console.log('根据你设置的timeout/真的请求超时 判断请求现在超时了，你可以在这里加入超时的处理方案')
      // return service.request(originalRequest);//例如再重复请求一次
    }
  }
)

export default service

2.在src文件夹下新建api文件夹,在api文件下内新建index.js文件(存放全部请求,便于管理接口)

import request from '../utils/request' //引入封装好的axios拦截文件

//接口示例  https://elm.cangdu.org/v1(实例的baseURL)+参数
//https://elm.cangdu.org/v1/cities    这是此接口,具体参数需要在第三个步骤拼接
export function banner(data) {  
  const url = '/cities';
  return request({
    url: url,
    method: 'get',
    data
  })
}

3. 在vue组件内使用接口

这是之前学习中掌握的一个基础的axios封装,如果想要丰富一些,可以考虑结合加载过程展示loading动画
请求都是一个个分开的,严谨起来的可能感觉不是那么好用