Axios在Vue中的使用

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

安装

• 使用 npm:

npm install axios

• 使用 yarn

yarn add axios

• 使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在Vue中封装Axios

生成axios实例

点击查看代码

import axios from 'axios'

const $axios = axios.create({
  baseURL: API_ROOT,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 5000
})

/* request interceptor */
$axios.interceptors.request.use(config => {
  // do something
  /* const TOKEN = store.state.user.token
  if (TOKEN) {
    config.headers['Authorization'] = TOKEN
  } */
  return config
}, error => {
  console.warn(error)
  return Promise.reject(error)
})

/* response interceptor */
$axios.interceptors.response.use(res => {
  // do something
  /*
  if (Number(res.data.code) === 0) {
    return res.data
  } else {
    const errMsg = res.data.msg
    Message({
      type: 'error',
      message: errMsg
    })
    return false
  }
  */
}, error => {
  return Promise.reject(error)
})

export default $axios

将接口请求归类并写到统一的js文件

export default $axios => {
  return {
    /* 登录 */
    login({ zoneCode, phoneNumber, password }) {
      return $axios.post('/api/v1/user/login', {
        zoneCode,
        phoneNumber,
        password
      })
    }
  }
}

新建Api类

import $axios from './config'
import User from './user' /* 分文件引入api */

class Api {
  constructor($axios) {
    this.$axios = $axios || {}
  }
  get user() {
    const user = User(this.$axios)
    return {
      ...user
    }
  }
}

export default new Api($axios)

全局注册

import Vue from 'vue'
import api from '@/api'

export default Vue.use({
  install(_Vue) {
    if (!Vue.prototype.hasOwnProperty('$api')) {
      Object.defineProperty(_Vue.prototype, '$api', {
        get() {
          return api
        }
      })
    }
  }
})

组件中使用

this.$api.user.login()

Axios配置文档

Axios