vue中axios的封装用法

关于vue中axios的封装：

---

代码如下：

1. 首页导入axios，然后把它封装到一个函数里，并且把函数导出，在函数里面先创建一个axios的实例，然后return出去。

import axios from 'axios'

export function request(config) {
    //1.创建axios实例
    const instance = axios.create({
      baseURL: 'http://xxxxxxxx:8000/api/v1',
      timeout: 5000
    })
    //2.axios的拦截器
    //2.请求拦截
    instance.interceptors.request.use(config => {
      return config
    },err => {
      // console.log(err)
    })

    //2.2响应拦截
    instance.interceptors.response.use(res => {
      return res.data
    },err => {
      console.log((err))
    })

   return instance(config)   
    //config就相当于url       这时本省返回promise
    //>这种方式就是相当于把axios放到一个函数里面，然后调用这个函数，
    //通过调用这个函数执行axios实例的方法  实例({url})  其中url时通过函数的参数传递过来的  
}

import {request} from './request'

export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}


export function getHomeGoods(type, page) {   //通过有参数的axios的数据请求，带有参数，params的形式传递两个参数
  return request({
    url: '/home/data',   
    params: {
      type,
      page
    }
  })
}

2.在需要使用的地方，导入request，由于一些组件需要axios获取数据，在这里又封装一个函数，函数里调用request，根据获取数据的需求可以传象的参数。