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>

最后

以上就是着急白云为你收集整理的vue-统一api管理参考文档的全部内容，希望文章能够帮你解决vue-统一api管理参考文档所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。