axios实例

当在一个项目中需要请求多个baseURL或者其它不同的配置时，可以通过创建不同的axios实例 分别配置

const instance1 = axios.create({
  baseURL:'http://123.456:8080',
  timeout:5000
})
instance1({
  url:'/home/test'
}).then(res=>{
  console.log(res)
})

const instance2 = axios.create({
  baseURL:'http://www.abc.com:8080',
  timeout:3000
})
instance2({
  url:'/test/aa'
}).then(res=>{
  console.log(res)
})

2.基本封装

2.1 使用回调函数

network/request.js

import axios from 'axios'

export function request(config, success, fail) {

  const instance1 = axios.create({
    baseURL: 'http://www.abc.com:8080',
    timeout: 3000
  })

  instance1(config)
    .then(res => {
      success(res)
    }).catch(err => {
      fail(err)
    })
}

调用

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

request({
  url:'/api/test'
},res=>{
  console.log(res)
},err=>{
  console.log(err)
})

2.2上面的另一种写法

import axios from 'axios'

export function request(config) {

  const instance1 = axios.create({
    baseURL: 'http://www.abc.com:8080',
    timeout: 3000
  })

  instance1(config.baseConfig)
    .then(res => {
      config.success(res)
    }).catch(err => {
      config.fail(err)
    })
}

request({
  baseConfig:{
    url:'/api/test',
  },
  success(res){
    console.log(res)
  },
  fail(err){
    console.log(err)
  }
})

2.3 返回一个Promise

import axios from 'axios'

export function request(config) {

  return new Promise((resolve, reject) => {
    const instance1 = axios.create({
      baseURL: 'http://www.abc.com:8080',
      timeout: 3000
    })

    instance1(config)
      .then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
  })

}

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

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

2.4因为instance调用之后本身返回的就是一个Promise实例，所以上面的代码可以简写为

import axios from 'axios'

export function request(config) {

    const instance1 = axios.create({
      baseURL: 'http://www.abc.com:8080',
      timeout: 3000
    })

   return instance1(config)

}

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

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