axios调用gp服务_基于VUE框架中封装axios

不点蓝字，我们哪来故事？

前言：

什么是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;        })      },    }

End