默认vue项目中已经使用vue-cli生成，安装axios，基于element-ui开发，axiosconfig目录和api目录是同级，主要记录配置的相关。
1. 在axiosconfig目录下的axiosConfig.js
import Vue from 'vue'import axios from 'axios'import qs from 'qs'import {
Message, Loading }
from 'element-ui'// 响应时间axios.defaults.timeout = 5 * 1000// 配置cookie// axios.defaults.withCredentials = true// 配置请求头axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;
charset=UTF-8'// 静态资源Vue.prototype.$static = ''// 配置接口地址axios.defaults.baseURL = ''var loadingInstance// POST传参序列化(添加请求拦截器)axios.interceptors.request.use( config => {
loadingInstance = Loading.service({
lock: true, text: '数据加载中，请稍后...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }
) if (config.method === 'post') {
config.data = qs.stringify(config.data) }
return config }
, err => {
loadingInstance.close() Message.error('请求错误') return Promise.reject(err) }
)// 返回状态判断(添加响应拦截器)axios.interceptors.response.use( res => {
if (res.data.code === 200) {
loadingInstance.close() return res }
else {
loadingInstance.close() Message.error(res.data.msg) }
}
, err => {
loadingInstance.close() Message.error('请求失败，请稍后再试') return Promise.reject(err) }
)// 发送请求export function post (url, params) {
return new Promise((resolve, reject) => {
axios .post(url, params) .then( res => {
resolve(res.data) }
, err => {
reject(err.data) }
) .catch(err => {
reject(err.data) }
) }
)}
export function get (url, params) {
return new Promise((resolve, reject) => {
axios .get(url, {
params: params }
) .then(res => {
resolve(res.data) }
) .catch(err => {
reject(err.data) }
) }
)}
2. 在api目录下的index.js,api1.js,api2.js
api1.jsimport {
post }
from '../axiosconfig/'export default {
login(params) {
return post('/users/api/login', params) }
}
api2.jsimport {
post }
from '../axiosconfig/'export default {
regist(params) {
return post('/users/api/regist', params) }
}
index.jsimport user from './api1.js'import active from './api2.js'export default {
api1, api2}
3. main.js 配置
import api from './api/'Vue.prototype.$api = api
4. 在组件中使用
登录组件中doLongin() {
let params={
}
this.$api.api1.login(params).then(res => {
console.log(res) }
)}
注册组件中doRegist() {
let params={
}
this.$api.api2.regist(params).then(res => {
console.log(res) }
)}
您可能感兴趣的文章:
- 使用FileReader API创建Vue文件阅读器组件
- 详解Vue.js项目API、Router配置拆分实践
- Nginx 解决WebApi跨域二次请求以及Vue单页面的问题
- 深入理解Vue官方文档梳理之全局API
- 详解Vue2 SSR 缓存 Api 数据
- Vue2 配置 Axios api 接口调用文件的方法
- 详解vue-cli本地环境API代理设置和解决跨域
- vue.js全局API之nextTick全面解析
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue 2.x教程之基础API
