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

Posted 2021-05-25 yw3692582

首先封装 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 有参数：