Vue --- 统一封装axios的接口请求，并解决多个域名接口的请求问题

该篇文章中的接口是我在看了某位大神老师的视频后拿下来的，在此非常感谢！！！

在开发时，我们不可能在每次请求接口时都把接口域名写一遍，比如下面这样

axios.get("http://123.207.32.32:8000/home/data",{
  params:{
    type:"sell",
    page:3
  }
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error)
})


axios.post("http://123.207.32.32:8000/home/data",{
  type:"sell",
  page:3
}).then(res => {
  console.log(res);
}).catch(error => {
  console.log(error)
})

可以看到http://123.207.32.32:8000写了两遍，开发时可能会写更多遍，这样是不好的，为了解决这个问题，需要进行封装

封装方法如下：
一、项目中只有一个域名的情况
1、先在项目目录的src文件夹下创建一个network的文件夹，并新建一个request.js的文件
2、在request.js中写入如下代码

import axios from "axios"

export function request(config){
  // 创建axios实例
  const instance = axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  })
  // 发送真正的网络请求
  return instance(config)
}

3、在你的路由组件中引入，并进行调用请求接口即可

<template>
  <div>
    <h2>axiosDemo1</h2>
  </div>
</template>

<script>
  import {request} from "../network/request"

  export default {
    name: "axiosone",
    created(){
      request({
        url:"/home/multidata"
      }).then(res => {
        console.log(res)
      })
    }
  }
</script>

二、项目中有两个甚至多个域名的情况
1、也就是说在开发时，如果域名不止一个，那么就在上面的方法的基础中多export导出一个即可，如下代码，这段代码是在你创建的network文件夹下的request.js文件中的

import axios from "axios"

export function request1(config){
  // 创建axios实例
  const instance = axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  })
  // 发送真正的网络请求
  return instance(config)
}

export function request2(config){
  // 创建axios实例
  const instance = axios.create({
    baseURL:"http://httpbin.org/get",
    timeout:5000
  })
  // 发送真正的网络请求
  return instance(config)
}

2、在路由组件中如下代码使用即可
<template>
  <div>
    <h2>axiosDemo1</h2>
  </div>
</template>

<script>
  import {request1} from "../network/request"
  import {request2} from "../network/request"

  export default {
    name: "axiosone",
    created(){
      request1({
        url:"/home/multidata"
      }).then(res => {
        console.log(res)
      })

      request2().then(res => {
        console.log(res)
      })
    }
  }
</script>

三、优化某个接口在项目多次请求时重复出现的问题
（建议在看完上面第二个案例的代码后再看这里）

某个接口，可能在项目中会多次请求或者说在多个页面都有用到；
比如在A页面这么写：

<script>
  export default {
    name: "A",
    created(){
      request1({
        url:"/home/multidata"
      }).then(res => {
        console.log(res)
      })
    }
  }
</script>

在页面B也有这么个请求：

<script>
  export default {
    name: "B",
    created(){
      request1({
        url:"/home/multidata"
      }).then(res => {
        console.log(res)
      })
    }
  }
</script>

可以看到都有相同的/home/multidata，如果后期这个接口名有改动，只能手动一个个的去改，费时费力，即使使用一键全局替换，也很难保证不出问题；

优化方法如下（仅供参考）：

1、如果你有看完第二个案例的代码，你会知道在request.js中有下面这段代码

import axios from "axios"

export function request1(config){
  // 创建axios实例
  const instance = axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  })
  // 发送真正的网络请求
  return instance(config)
}

export function request2(config){
  // 创建axios实例
  const instance = axios.create({
    baseURL:"http://httpbin.org/get",
    timeout:5000
  })
  // 发送真正的网络请求
  return instance(config)
}

我们会以导出的方法request1为例

2、在你已经建好的network文件夹下，新建一个axiosrequest.js文件（或者你自己命名也行）
3、在axiosrequest.js文件中写入如下代码

import {request1} from "./request";

export function getaxiosMultidata(){
  return request1({
    url:"/home/multidata"
  })
}

也就是先引入同级目录下的request.js中已经导出的request1方法，并再写一个getaxiosMultidata方法，该方法return的是一个对象，对象中就是接口的url

4、在你的路由组件的js中，写上如下代码即可

<script>
  import {getaxiosMultidata} from "@/network/axiosrequest"

  export default {
    name: "axiosone",
    created(){
      getaxiosMultidata().then(res => {
        console.log(res)
      })
    }
  }
</script>

依然可以正常请求，如果有其他接口是重复调用的，也可以写到axiosrequest.js文件中

5、那么，多个页面使用就很方便了

比如在A页面这么写：

<script>
  import {getaxiosMultidata} from "@/network/axiosrequest"

  export default {
    name: "A",
    created(){
      getaxiosMultidata().then(res => {
        console.log(res)
      })
    }
  }
</script>

如果在B页面也用到，也直接这么写

<script>
  import {getaxiosMultidata} from "@/network/axiosrequest"

  export default {
    name: "B",
    created(){
      getaxiosMultidata().then(res => {
        console.log(res)
      })
    }
  }
</script>

即使后期接口名改了，比如现在是url:"/home/multidata"，后来改成了url:“api/home/multidata”
那么只需要在axiosrequest.js中修改即可

import {request1} from "./request";

export function getaxiosMultidata(){
  return request1({
    url:"api/home/multidata"
  })
}

四、看完第三个案例，发现是没有传参数的接口封装，如果你需要传参数，只需这么写即可：

1、依然在你的axiosrequest.js文件中继续写代码，比如现在多了一个getaxiosMultidataList方法，方法中有两个参数，分别是type和page，这个就是以后需要向接口传递的参数，可以是一个，可以是多个；

import {request1} from "./request";

export function getaxiosMultidata(){
  return request1({
    url:"/home/multidata"
  })
}

export function getaxiosMultidataList(type,page){
  return request1({
    url:"/home/data?type="+type+"&page="+page
  })
}

2、如果想在组件中使用，这么写即可

<script>
  import {getaxiosMultidataList} from "@/network/axiosrequest"

  export default {
    name: "axiosone",
    data(){
      return{
        type:"sell",
        page:3
      }
    },
    created(){
      getaxiosMultidataList(this.type, this.page).then(res => {
        console.log(res)
      })
    }
  }
</script>

这样一来，不仅域名全部统一封装，接口名也全部统一，方便后期维护和管理，也不会有风险