在vue项目中,与API接口交互时,通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等功能
当项目中API接口过多时,方便开发以及接口变更时修改请求地址,推荐将接口进行封装,整齐的api就像电路板一样,即使再复杂也能很清晰整个线路。

安装axios

npm install axios -S

创建相关目录文件

xiangguanmulu

request.js配置

import axios from 'axios'
import router from "@/router";
export function request(config) {
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'https://api.shop.eduwork.cn',
    timeout: 10000
  })
  // 请求拦截器配置
  instance.interceptors.request.use(config => {
      // config.headers.Authorization = window.sessionStorage.getItem('token')
      return config
    }, error => {
      console.log(error)
      return Promise.error(error)
    }
  )
  // 响应拦截器配置
  instance.interceptors.response.use(response => {
    console.log(response)
    return response.data
  }, error => {
    switch (error.response.status) {
      case 401:
        console.log("无权访问")
        router.push({path: '/login'})
        break
      case 403:
        console.log("token过期啦")
        router.push({path: '/login'})
        break
      case 404:
        console.log("404啦")
        router.push({path: '/404'})
        break
      default:
        return Promise.reject(error)
    }
    return Promise.reject(error)
  })
  // 发送真正的网络请求
  return instance(config);
}
export default request

http.js配置

import {request} from './request'
const http = {
  get(url, params) {
    const config = {
      method: 'get',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.data = params
    return request(config)
  },
  put(url, params) {
    const config = {
      method: 'put',
      url: url
    }
    if (params) config.params = params
    return request(config)
  },
  delete(url, params) {
    const config = {
      method: 'post',
      url: url
    }
    if (params) config.params = params
    return request(config)
  }
}
export default http

home.js配置

按照页面,每个页面创建一个js文件,统一管理api请求方式和地址

import http from './http'
export function getHomeAllData(){
  return http.get('/api/index')
}

vue组件发起请求

<template>
  <h1>首页</h1>
</template>
<script>
import {onMounted} from 'vue'
import {getHomeAllData} from '@/api/home'
export default {
  name: 'Home',
  components: {},
  setup() {
    onMounted(() => {
      getHomeAllData().then((response) => {
        console.log('正常响应')
        console.log(response)
      }).catch(error => {
        //发生错误时执行的代码
        console.log('异常响应')
        console.log(error)
      })
    })
  }
}
</script>
本文作者:博主:
文章标题:VUE3封装axios网络请求示例
本文地址:https://www.wouldmissyou.com/archives/81/     
版权说明:若无注明,本文皆为“多点部落”原创,转载请保留文章出处。
最后修改:2021 年 05 月 14 日 11 : 26 AM
如果觉得我的文章对你有用,请随意赞赏