Vue axios封装

vue脚手架中，全局封装axios，让使用过程中更方便，更加容易管理各种api接口

一、axios封装——http.js

import { axios } from './request'
// get 请求
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 请求
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 请求
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 请求
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 }

二、请求拦截器与响应拦截器——request.js

// 引入 axios
import axios from 'axios'
// axios 配置的请求根路径
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? 'xx' : 'xx'
// 请求超时
axios.defaults.timeout = 60000

// axios 请求拦截器
axios.interceptors.request.use(config => {
  // 为请求头添加 token
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, error => {
  return Promise.reject(error)
})
// axios 响应拦截器
axios.interceptors.response.use(response => {
  switch (response.data.code) {
    // ...
  }
  return response
}, err => {
  return Promise.reject(err)
})
export { axios }

三、Api封装统一管理——api.js

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

api接口可以更细致分为各个模块的js文件

四、调用——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中把api挂载全局哦

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