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

首先封装 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, headers) {
 return new Promise((resolve, reject) => {
  axios
   .get(url, {
    params: params,
headers: headers }) .then(res
=> { resolve(res) }) .catch(e => { reject(e) }) }) } // post 请求 export function post(url, params, headers) { return new Promise((resolve, reject) => { axios .post(url, params, {hearders: headers}) .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, headers) => get('接口地址', params, headers) // 获取站的列表

/**
 * 页面:/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 有参数:

 参考文章:https://blog.csdn.net/qq_40076219/article/details/103089457

posted @   yw3692582  阅读(199)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示