vue腳手架中，全局封裝axios冲泥，讓使用過程中更方便，更加容易管理各種api接口

一壁涎、axios封裝——http.js

import { axios } from './request'
// get 請(qǐng)求
const get = function (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// POST 請(qǐng)求
const post = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// PUT 請(qǐng)求
const put = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}
// DELETE 請(qǐng)求
const del = function (url, data) {
  return new Promise((resolve, reject) => {
    axios.delete(url, data).then(res => {
      resolve(res.data)
    }).catch(err => {
      reject(err.data)
    })
  })
}

export default { get, post, put, del }

二凡恍、請(qǐng)求攔截器與響應(yīng)攔截器——request.js

// 引入 axios
import axios from 'axios'
// axios 配置的請(qǐng)求根路徑
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'xx' : 'xx'
// 請(qǐng)求超時(shí)
axios.defaults.timeout = 60000

// axios 請(qǐng)求攔截器
axios.interceptors.request.use(config => {
  // 為請(qǐng)求頭添加 token
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, error => {
  return Promise.reject(error)
})
// axios 響應(yīng)攔截器
axios.interceptors.response.use(response => {
  switch (response.data.code) {
    // ...
  }
  return response
}, err => {
  return Promise.reject(err)
})
export { axios }

三、Api封裝統(tǒng)一管理——api.js

import http from './http'
export default {
  // 獲取列表
  apiGetList (data) {
    return http.get('/list', data)
  }
}

api接口可以更細(xì)致分為各個(gè)模塊的js文件

四怔球、調(diào)用——demo.vue

<template>
  <div>
  </div>
</template>
<script>
export default {
  data(){
    return(){
      navList:[]
    }
  },
  methods:{
      async getList(){
          const res = await this.$http.apiGetList()    //getList()是api.js里面封裝的接口
       }
  }
}
</script>
<style>
</style>

記住要在main.js中把a(bǔ)pi掛載全局哦

// 引入 api 接口
import api from './Api/api'
Vue.prototype.$http= api