vue封装axios

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

npm install axios

http.js

import axios from 'axios' // 引入axios
// 响应拦截器
// 响应拦截器
axios.interceptors.response.use(
  response => {
    console.log(response)
    // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
    // 否则的话抛出错误
    if (response.status === 200) {
      return Promise.resolve(response)
    } else {
      return Promise.reject(response)
    }
  },
  // 服务器状态码不是2开头的的情况
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  // 下面列举几个常见的操作，其他需求可自行扩展
  error => {
    if (error.response.status) {
      return Promise.reject(error.response)
    }
  })
/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
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)
    })
  })
}
/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 */
export function post (url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err.data)
      })
  })
}

api.js

/**
 * api接口统一管理
 */
import { get, post } from './http'
const preUrl = 'http://localhost:8081/'
export const apiAddress = p => get(preUrl + '/stuUser/list', p)
export const apiAddressa = p => post(preUrl + '/stuUser/list', p)

使用

<script>
import { apiAddress } from '@/js/api'// 导入我们的api接口
export default {
  name: 'App',
  components: {
  },
  created () {
    this.onLoad()
  },
  data () {
    return {
    }
  },
  methods: {
    // 获取数据
    onLoad () {
      // 调用api接口，并且提供了两个参数
      apiAddress({
        page: 1,
        rows: 1
      }).then(res => {
        // 获取数据成功后的其他操作
        this.$message({
          message: res,
          type: 'success'
        })
      })
    }
  }
}
</script>

以上是 vue封装axios 的全部内容， 来源链接： utcz.com/z/378482.html

回到顶部