VUE3封装axios网络请求

Posted 2021-09-06 月疯

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

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>

注意：

export与export default均可用于导出常量、函数、文件、模块等

export：多文件

export default：单文件

 常见疑问：
new vue({}) 只在入口文件 main.js里使用，而其余组件的里的属性和方法的使用，为什么都要放在export default{}中，而不是每个组件都用new Vue({})来生成呢？
放在export default{}中它是作为一个class被导出的么？
写法也不一样。就data来说，给作为new Vue的参数，它是对象。而在 export default中，它就成了方法。
解释：
export default是ES6的语法，用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。

而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

export default命令并不是在每个文件中都是必须的。它的作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入使用的，里面的data()方法要return。