vue-统一api管理

1. 第一章 vue入门
2. 第二章 vue统一api管理
3. 第三章 vuex状态管理
4. 第四章 vue登录示例

参考文档

统一api管理

在第一章中 main.js 中引入 axios就可以在 .vue中使用axios，但是项目中一般不这样做，不便接口管理
以下参考了参考文档
1.在src目录下新建http目录，新建axios.js和api.js两个文件

axios.js

import axios from 'axios'
import Qs from 'qs'
import { Message, Loading } from 'element-ui' // 消息提示框组件 这个你们可以不用

// 环境的切换
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'https://cnodejs.org/api/v1'
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = 'https://cnodejs.org/api/v1'
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://cnodejs.org/api/v1'
}

// 设置请求超时时间
axios.defaults.timeout = 10000

// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'

// 请求拦截
axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么 验证token之类的
  Loading.service(true)
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.error(error)
})

// 响应拦截
axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 封装get方法和post方法

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function get (url, params) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    }).then(res => {
      resolve(res.data)
      Loading.service(true).close()
      Message({message: '请求成功', type: 'success'})
    }).catch(err => {
      reject(err.data)
      Loading.service(true).close()
      Message({message: '加载失败', type: 'error'})
    })
  })
}

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, Qs.stringify(params))
      .then(res => {
        resolve(res.data)
        Loading.service(true).close()
        Message({message: '请求成功', type: 'success'})
      })
      .catch(err => {
        reject(err.data)
        Loading.service(true).close()
        Message({message: '加载失败', type: 'error'})
      })
  })
}

api.js

/**
 * api接口统一管理
 */
import { get, post } from './axios'

/**
 *
 * @param {string} params
 * 我们定义了一个topics方法
 * 这个方法有一个参数params
 * params是我们请求接口时携带的参数对象
 * 而后调用了我们封装的post方法
 * post方法的第一个参数是我们的接口地址
 * 第二个参数是topics的params参数
 * 即请求接口时携带的参数对象
 * 最后通过export导出topics。
 */

// 主题首页
export const topics = params => get('/topics', params)
export const topics1 = params => post('/topics', params)

修改helloWorld.vue

<template>
  <el-row>
    <el-button type="primary" icon="el-icon-edit" @click="click()" circle></el-button>
  </el-row>
</template>

<script>
import { topics } from '@/http/api.js' // 导入接口
export default {
  data () {
    return {
      value: null
    }
  },
  methods: {
    click () {
      topics({
      })
        .then(res => {
          console.log(res)
        })
    }
  }
}
</script>