axios封装的思想，解决多个链接后期维护问题，适用于大型项目

首先来看一下普通的axios网络请求方式

1.使用get请求和post请求

<div>
  <button @click="getHandle">发送get请求</button>
  <button @click="postHandle">发送post请求</button>
</div>

export default {
  name: 'Home',
  components: {
    
  },
  // data(){
  //   return{
  //     info:""
  //   }
  // },
  methods:{
    getHandle(){
      this.$axios.get("https://jsonplaceholder.typicode.com/users",{
        params:{
          id:1,
          name:"Leanne Graham"
        },
        headers:{}
      }).then(res=>{
        console.log(res)
      })
    },

    postHandle(){
      this.$axios.post("https://jsonplaceholder.typicode.com/users",{
        id:2
      },{}).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },

对于复杂的项目，此种请求方式*会在后期维护上面浪费很多时间，所以必须要对axios进行封装。以下是封装的过程。

1.在scr里面创建一个文件夹取名叫utils,在utils文件夹下面创建名为request.js的文件。

在request.js文件中添加以下代码

import axios from "axios"

const instance=axios.create({
    baseURL:"https://jsonplaceholder.typicode.com",
    timeout:5000
})



export function get(url,params){
    return instance.get(url,{params})
}


export function post(url,data){
    return instance.post(url,data)
}


export function del(url){
    return instance.delete(url)
}

export function put(url,data){
    return instance.put(url,data)
}

回到原来界面中，将get方法导入，并创建一个button``

 <button @click="getByMineHandle">调用封装的get请求</button>

再写入调用方法

import{get} from '../utils/request.js'

export default {
  name: 'Home',
  components: {
    
  },
  // data(){
  //   return{
  //     info:""
  //   }
  // },
  methods:{
    getHandle(){
      this.$axios.get("https://jsonplaceholder.typicode.com/users",{
        params:{
          id:1,
          name:"Leanne Graham"
        },
        headers:{}
      }).then(res=>{
        console.log(res)
      })
    },

    postHandle(){
      this.$axios.post("https://jsonplaceholder.typicode.com/users",{
        id:2
      },{}).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.log(err)
      })
    },

    getByMineHandle(){
        get('/users',{}).then(res=>{console.log(res)})
    }

当你执行完这些操作时，就可以完成axios的封装了，其中核心思想在于把两个地址段拆分拼接。``

const instance=axios.create({
    baseURL:"https://jsonplaceholder.typicode.com",
    timeout:5000
})

    getByMineHandle(){
        get('/users',{id:1}).then(res=>{console.log(res)})
    }

形成的是一个完整的请求地址，和post与get作用一样，唯一的不同是封装是用我们自定义的方法。