This time I will show you how to use the api interface in the vue project, and what are the precautions for using the api interface in the vue project. The following is a practical case, let's take a look.
1. axiosConfig.js in the axiosconfig directory
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. index.js, api1.js, api2.js in the api directory
api1.js import { post } from '../axiosconfig/' export default { login(params) { return post('/users/api/login', params) } } api2.js import { post } from '../axiosconfig/' export default { regist(params) { return post('/users/api/regist', params) } } index.js import user from './api1.js' import active from './api2.js' export default { api1, api2 }
3. main.js configuration
import api from './api/' Vue.prototype.$api = api
4. Use
登录组件中 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) }) }
How to use vue source code parsing event mechanism
How to use webpack modular management and packaging tools
The above is the detailed content of How to use the api interface in vue project. For more information, please follow other related articles on the PHP Chinese website!