首页 > 移动平台 > 详细

Vue中使用 axios 统一管理 api 接口

时间:2021-05-25 15:21:27      阅读:26      评论:0      收藏:0      [点我收藏+]

首先封装 axios.js:

// 引入 axios 和 qs(qs选择性引入)
import axios from ‘axios‘
import qs from ‘qs‘

// 请求拦截:可以在header中统一添加token
axios.interceptors.request.use(
 config => {
  return config
 },
 err => {
  return err
 }
)

// 响应拦截(直接将data返回了)
axios.interceptors.response.use(
 response => {
  return response.data
 },
 err => {
  return err
 }
)

/**
 * get 和 post 请求
*/
// get 请求
export function get(url, params) {
 return new Promise((resolve, reject) => {
  axios
   .get(url, {
    params: params,
   })
   .then(res => {
    resolve(res)
   })
   .catch(e => {
    reject(e)
   })
 })
}

// post 请求
export function post(url, params) {
 return new Promise((resolve, reject) => {
  axios
   .post(url, params)
   .then(res => {
    resolve(res)
   })
   .catch(e => {
    reject(e)
   })
 })
}

然后是api.js:

import { get, post} from ‘./axios‘

/**
 * 接口统一管理
*/

/**
 * 页面:/views/main/Station.vue
 * 说明: 台站管理
*/
export const get_stationList_zzj  = params => post(‘接口地址‘, params) // 获取站的列表

/**
 * 页面:/views/main/User.vue
 * 说明: 用户管理
*/
export const get_userList = params => post(‘接口地址‘, params) // 获取用户列表

最后是在组件中使用:

先引入:

技术分享图片

 

 

 后使用:

// post 无参数
get_userList()
    .then(res => {
      console.log(res)
    })
    .catch(e => {
     console.log(e)
    })

post 有参数:

技术分享图片

 

Vue中使用 axios 统一管理 api 接口

原文:https://www.cnblogs.com/lyt520/p/14808263.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!