网络请求封装

为什么要对网络请求进行封装？

在还没封装前，想要使用axios框架的话，需要在每一个地方对axios进行导入和使用，在小的demo中倒没有什么问题，但在一个大的项目中，需要请求的地方很多，成百上千个，这样如果每次使用都需要这样操作，在框架发生变动的时候，就需要去修改每一个文件了，这样工作量是异常大的。

基本使用

我在components文件夹中创建了network文件夹，里面新建了request.js文件来对请求进行封装。

封装方法

导入axios

import axios from 'axios'

格式1

export function request(config, success, failure) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    instance(config)
        .then(res => {
            // console.log(res)
            success(res)
        })
        .catch(err => {
            // console.log(err)
            failure(err)
        })
}

调用格式1

import {
  request
} from './components/network/request'

request({
  url: '/home/multidata',
}, res => {
  console.log('成功调用！')
  console.log(res)
}, err => {
  console.log(err)
})

格式2

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    instance(config.baseConfig)
        .then(res => {
            // console.log(res)
            config.success(res)
        })
        .catch(err => {
            // console.log(err)
            config.failure(err)
        })
}

调用格式2

request({
  baseConfig: {
    url: '/home/multidata'
  },
  success: function (res) {
    console.log(res)
  },
  failure: function (err) {
    console.log(err)
  }
})

Promise形式

export function request(config) {
    return new Promise((resolve, reject) => {
        const instance = axios.create({
            baseURL: 'http://123.207.32.32:8000',
            timeout: 5000
        })

        instance(config)
            .then(res => {
                // console.log(res)
                resolve(res)
            })
            .catch(err => {
                // console.log(err)
                reject(err)
            })
    })
}

简写形式

export function request(config) {
    const instance = axios.create({
        baseURL: 'http://123.207.32.32:8000',
        timeout: 5000
    })

    return instance(config)
}

调用形式

request({
  url: '/home/multidata'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

axios拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到响应后，进行对应的处理。

使用场景

1. 比如config中的一些信息不符合服务器的要求
2. 比如每次发送网络请求时，都希望在界面中显示一个请求的图标（loading）
3. 某些网络请求（比如登录（token）），必须携带一些特殊的信息

使用方法

请求拦截

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

响应拦截

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