vue封装axios接口请求

最新推荐文章于 2024-08-17 20:33:58 发布

self_challenge

最新推荐文章于 2024-08-17 20:33:58 发布

阅读量196

点赞数 2

文章标签： vue 接口 ajax

本文链接：https://blog.csdn.net/self_challenge/article/details/106223298

版权

Home.vue

<template>
  <div class="home">
    <button @click="getVeryTakeInformation">get非携参请求数据</button>
    <button @click="getTakeInformation">get携参请求数据</button>
    <button @click="postData">post携参请求数据</button>
  </div>
</template>

<script>
import { getVeryTakeJoin, getTakeJoin, postComment } from '../request'
export default {
  name: 'Home',
  components: {
  },
  methods: {
    getVeryTakeInformation () {
      getVeryTakeJoin().then(data => {
        console.log('get未携参返回数据', data)
      })
    },
    getTakeInformation () {
      const info = { basis_id: 287 }
      getTakeJoin(info).then(data => {
        console.log('get携参返回数据', data)
      })
    },
    postData () {
      const info = { id: 287, limit: 10, page: 2 }
      postComment(info).then(data => {
        console.log('post获取评论数据', data)
      })
    }
  }
}
</script>

request/index.js

import network from './network'
// 接口文件
import port from './port'

// get非携带参数请求
export function getVeryTakeJoin () {
  return network({
    url: port.userInfoPort,
    method: 'get'
  })
}
// get携带参数请求
export function getTakeJoin (info) {
  return network({
    url: port.courseInfo + `${Object.keys(info)[0]}=${info.basis_id}`,
    method: 'get'
  })
}
// post携带参数请求
export function postComment (info) {
  return network({
    url: port.comment,
    method: 'post',
    data: info
  })
}

request/network.js

import axios from 'axios'
// axios实例
const setAs = axios.create({
  baseURL: 'https://www.xxx.com',
  timeout: 5000
})

// 请求拦截
setAs.interceptors.request.use(data => {
  console.log('请求拦截', data)
  return data
// eslint-disable-next-line prefer-promise-reject-errors
}, _error => Promise.reject('请求错误'))

// 响应拦截
setAs.interceptors.response.use(data => {
  console.log('响应拦截', data)
  return data
// eslint-disable-next-line prefer-promise-reject-errors
}, _error => Promise.reject('响应错误'))

export default setAs

request/port.js

const storagePort = {
  // 获取用户信息接口
  userInfoPort: '/api/xxx/userInfo',
  // 获取课程信息接口
  courseInfo: '/api/xxx/courseInfo/',
  // 获取评论接口
  comment: '/api/xxx/courseComment'
}
// 导出携带接口对象
export default storagePort