Comment gérer l'interface API du projet Vue

Cette fois, je vais vous montrer comment gérer l'interface API du projet Vue, et quelles sont les précautions à prendre pour gérer l'interface API du projet Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Le projet vue par défaut a été généré à l'aide de vue-cli, installé axios et développé sur la base d'element-ui. Le répertoire axiosconfig et le répertoire api sont au même niveau, et ils enregistrent principalement la configuration.

1. axiosConfig.js dans le répertoire axiosconfig

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.

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. Configuration de main.js

import api from './api/'
Vue.prototype.$api = api

4. Utiliser

dans les composants

登录组件中
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)
 })
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les fonctions du décorateur JS dans les projets

Comment utiliser les nœuds echarts pour afficher des données dynamiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!