关于axios网络请求的封装

对于一个页面需要请求数据

我们首先对于一个项目的总的网络数据请求建立一个network目录，里面写总网络请求相关的代码。

import axios from 'axios'

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: '这里写你的后端接口',
    timeout: 5000
  })

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  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);
  })

  // 3.发送真正的网络请求
  return instance(config)  //这里最后return出去的是一个promise对象
}

 

然后难道我们就直接在对应的界面拿相应的数据了吗？

不，不是的。

如果这样的话，我们相关的逻辑上的代码和我们网络请求的代码的耦合度就太高了，我们在一个界面中网络请求的数据不是一次，我们会在多个不同的模块中请求不同的数据，如果后期需要维护网络模块代码就十分的麻烦

那么我们就可以在中间再封装一层，那么我们在需要修改的时候，直接来修改这些数据就行。

比如我们需要请求首页中的数据，那么我们可以在network目录下，创建一个home文件专门写我们关于home的网络请求相关的代码。

import {request} from "./request";

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

export function getHomeGoods(type,page) {
  return request({
    url: '/home/data',
    params: {
      type,
      page,
    }
  })
}

这样就可以使我们的代码非常优雅~

然后我们就可以在页面中请求数据了。当然你可以是在生命周期 created函数中也就是当页面创建完成后立马请求数据也就是执行你home文件中的函数

        getHomeMultidata().then(res => {
          console.log(res);
          this.result = res;//保存请求下来的数据
        })

在网络封装中 return的是一个promise函数

所以在你成功请求数据后就可以调用.then函数获取数据并保存在你的data域中。