网络请求基于axios的相关实现

为了减少项目对第三方框架的依赖，我们不会在每个文件中都对其引入，而是在一个文件中将其封装为一个自定义的方法，然后在项目中使用该自定义方法。这样如果某一天这个第三方框架不再维护、被抛弃以后，只需要对封装的文件进行修改。

 

由于不同网络请求的配置不同，特别是当服务器是分布式、代理式的时，可能baseURL都不一样。所以我们为不同的请求创建不同的axios实例，使用axios.create()方法，参数为一个配置对象：

const instance = axios.create({
    baseURL: 'http://xxxxxxxx',
    timeout: 5000
})

在发送请求、接受响应的过程中可以使用拦截器来加工请求配置、响应数据，注意加工完后一定记得再return回去：

instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err)
})
instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err)
})

比如，当用户访问某些深层内容时，可以先拦截该请求并检查用户是否登录（请求配置中是否有token），如果没有，通过修改url跳转到登录页面。

比如，网络请求的结果中除了要使用的数据，还有许多axios添加的相关配置，我们可以拦截该结果，然后只返回要使用的数据。（比如上面代码）

将该axios实例instance和拦截器封装到一个自定义函数request中，将instance()执行结果作为该函数的返回值。由于执行结果为一个promise对象，所以在使用时可以直接通过.then方法来处理请求到的数据。

完整代码如下：

import axios from 'axios'

export function request(config){
  const instance = axios.create({
    baseURL: 'http://152.136.185.210:7878/api/m5',
    timeout: 5000
  })
  instance.interceptors.request.use(config => {
    return config
  }, err => {
    console.log(err)
  })
  instance.interceptors.response.use(res => {
    return res.data
  }, err => {
    console.log(err)
  })
  return instance(config)
}

所以，在调用request函数时，只需要传一个给axios的配置对象即可，该对象通常包含五个参数：url、method、params（url参数）、headers、data（请求体参数）。除了url，其它均为可选值。

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

    getHomeMultidataUSE() {
      getHomeMultidata().then((res) => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
      });
    }

这里再次进行了一次封装，只是为了将请求的url单独拿出来，修改方便。

那什么时候发送请求呢？答案是当当前组件被创建以后。所以在created()生命周期钩子函数中调用  this.getHomeMultidataUSE()  即可，同时调用的还有 this.getHomeGoodsUSE ()，它是用来获取商品列表信息的方法，其内容更为复杂。

注意到在请求成功的then回调中，我们保存了banners数组和recommends数组，它们其实就是轮播图组件和推荐图片组件中使用的图片。