zoukankan      html  css  js  c++  java
  • vue-axios网络请求封装

      在说axios的网络封装前,先说一下之前说过的axios的全局默认配置。讲过axios的全局配置是为了避免重复去书写相同的配置,才进行统一的,但实际开发中,只有这一个全局配置是往往不够的,比如说你定义一个baseUrl="http://192.168.1.2",但是某些vue文件并不想去访问这个地址,想请求另一个IP,于是全局配置的方式就不适用了,并且全局配置的这个方式在实际开发也不适用,往往是创建多个不同的axios实例,不同的axios实例统一了各自的配置选项,具体使用如下:

    const instance1 = axios.create({
      baseURL: 'http://httpbin.org',
      timeout: 5000
    })
    
    instance1({
      url: '/home',
      method: 'get'
    }).then(response => {
      console.log(response)
    })
    
    const instance2 = axios.create({
      baseURL: 'http://192.168.88.11',
      timeout: 4000
    })
    
    instance2({
      url: '/home',
      method: 'get'
    }).then(response => {
      console.log(response)
    })

      下面开始说axios网络封装了。

      使用axios无非是发送请求嘛,而发送请求的地方一般在我们的vue文件进行发送,然后拿到数据展示到页面上。不过这样的方式有两个不好的地方:

        1. vue文件和axios的耦合度太高了,vue是直接导入axios进行使用的,如果哪一天这个框架不维护了,意味着代码得频繁替换

        2. axios代码太冗余了,如果有100个vue文件,要写那么多相同的axios代码,是很麻烦的一件事

      于是,我们尝试将axios进行封装,比如说封装成一个request.js,到时候vue文件引入这个request.js即可。一般的做法是在src下创建一个network目录,表示存放网络相关的文件,再该目录下创建request.js,封装的内容如下:

    import axios from 'axios'
    
    export function request(config){ //config是请求的配置项,包含url,method
      const instance1 = axios.create({
        baseURL: 'http://httpbin.org',
        timeout: 5000
      })
      
      return instance1(config)
    }

      使用request.js,如下:

    import {request} from '@/network/request';
    
    request({
      url: '/',
      method: 'get'
    }).then(res => {
      console.log(res)
    })

      具体的视频介绍看:https://www.bilibili.com/video/BV15741177Eh?p=146

  • 相关阅读:
    栈(代码分解)
    线性表(代码分解)
    绪论简概
    1006 Sign In and Sign Out (25 分)
    1005 Spell It Right (20 分)
    分支界限法解决0/1背包问题
    Sequence( 分块+矩阵快速幂 )
    Shape Number (最小表示法)
    Age of Moyu (2018 Multi-University Training Contest 7)
    [Cqoi2014]危桥 (两遍网络流)
  • 原文地址:https://www.cnblogs.com/ibcdwx/p/14644716.html
Copyright © 2011-2022 走看看