1.src目錄下,新建文件夾utils,在utils內(nèi)新建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 }
}
// 創(chuàng)建axios實例
const service = axios.create({
//請求的地址,也可根據(jù)代碼配置獲取,具體網(wǎng)上查找開發(fā)環(huán)境的地址
 baseURL:'https://elm.cangdu.org/v1', 
//延遲
  timeout: 15000
})

// request 攔截器,這些直接復(fù)制粘貼,都是死的代碼,若想更豐富,懂了之后可以添加更多的精彩
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('根據(jù)你設(shè)置的timeout/真的請求超時 判斷請求現(xiàn)在超時了，你可以在這里加入超時的處理方案')
      // return service.request(originalRequest);//例如再重復(fù)請求一次
    }
  }
)

export default service

2.在src文件夾下新建api文件夾,在api文件下內(nèi)新建index.js文件(存放全部請求,便于管理接口)

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

//接口示例  https://elm.cangdu.org/v1(實例的baseURL)+參數(shù)
//https://elm.cangdu.org/v1/cities    這是此接口,具體參數(shù)需要在第三個步驟拼接
export function banner(data) {  
  const url = '/cities';
  return request({
    url: url,
    method: 'get',
    data
  })
}

3. 在vue組件內(nèi)使用接口

<script>
  import {banner} from '@/api/index'  //引入接口文件,banner為所需接口
  export default {
    data() {
      return {
        type: 'guess'
      }
    },

    methods: {
      navs(){ //通過navs事件觸發(fā)接口
        banner({ // type為接口所需要的參數(shù)
          type:this.type ,
         // .....拼接的參數(shù)
        }).then(response =>{
          console.log(response)
        })
      }
    }
//請求的接口為 https://elm.cangdu.org/v1/cities?type=guess

  }
</script>

這是之前學(xué)習(xí)中掌握的一個基礎(chǔ)的axios封裝,如果想要豐富一些,可以考慮結(jié)合加載過程展示loading動畫
請求都是一個個分開的,嚴(yán)謹(jǐn)起來的可能感覺不是那么好用