基于VUE框架中封装axios

前言：

加QQ技术交流群741843152，一起讨论哦~~~~
欢迎访问我个人博客，里面有更多干货哟~~：点击即可访问
什么是axios，简单的来说就是axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求。axios 是一个轻量的 HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大大（Vue作者尤雨溪）宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。

---

单独封装axios的重要性？

在使用基于VUE框架开发项目的过程中，肯定使用到axios进行网络请求，请求服务器端得到数据、上传、删除和更新数据。但是把axios写在main函数中，显得main的代码过于“臃肿”，不美观，而且有时一个项目中可能请求多个服务器，都写在main是不可行的，还有最重要的是，一旦axios的开发团队不再进行维护，我们就需要更换，封装以后方便以后维护，所以我们要单独封装axios，在以后开发项目中，如果一个功能多次被调用的话，建议也封装成一个函数的形式，方便调用和维护。

第一步

在src目录下建一个文件夹，命名为：“network”，意思是网络请求文件夹。

第二步

在该目录下在再建立两个子目录，分别是"request.js"和"home.js"，后面这个"home.js"是我举得一个列子，后面大家可以根据实际的项目需求来更改目录的名字。

第三步

这步就到写代码啦，如下图所示：
request.js中的代码

import axios from 'axios' // 引入axios文件

export function request(config) {
  const instance = axios.create({
    baseURL:'http://xxx.xxx.xx.xx:8000/api/v1', // 请求数据的接口
    timeout:5000 //设置时间超时，单位毫秒
  })

  //请求拦截
  instance.interceptors.request.use(config => {
    return config;
  },err => {
    console.log(err)
  })
  //响应拦截
  instance.interceptors.response.use(res => {
    return res.data
  },error => {
    console.log(error)
  })
  return instance(config)
}

home.js中的代码，这是根据不同项目的需要来写的，我这只是个实列，大家可以参考着来写哦~~~~

import {request} from './request' // 引入刚刚建立的request.js文件

export function getHomeMultidata() {
  return request({
    url: '/home/multidata' // 具体的请求url尾部，其他的请求方那些可以在请求的那个页面再写，最好在这写上
  })
}

export function getGoodsData(type,page) {
  return request({
    url:'/home/data',// 具体的请求url尾部，其他的请求方那些可以在请求的那个页面再写，最好在这写上
    params:{// 传递参数
      type,
      page
    }
  })
}

第四步

在单个vue页面要引入，这步很重要，一定要引入！！！！

import {getHomeMultidata,getGoodsData} from 'network/home'

第五步

就是在实际中使用啦

    methods:{
      /*
      * 网络请求的方法
      * */
      getHomeMultidata(){
        getHomeMultidata().then(res => {
          this.banners = res.data.banner.list;
          this.recommends = res.data.recommend.list;
        })
      },
    }

这样就可以啦，
关注博主微信公众号，获取更多关于前端的干货哦