axios的封装完整版

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=>{
      success(res)
    })
    .catch(err=>{
      failure(err)
    })
}
//使用
request({
  url:'/home/multidata'
},res=>{
  console.log(res)
},err=>{
  console.log(err)
})

方案二：

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

  instance(config.baseConfig)
    .then(res => {
      config.success(res)
    })
    .catch(err => {
      config.failure(err)
    })
}
// 使用
request({
  baseConfig:{
    url:'/home/multidata'
  },
  success:function (res) {
    console.log(res)
  },
  failure:function (err) {
    console.log(err)
  }
})

改一(异步)：

// 方案三
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=>{
        resolve()
      })
      .catch(err=>{
        reject()
      })
  })
}
// 使用三
request({
  url: '/home/multidata',
}).then(res=>{

}).catch(err=>{

})

最终方案：

由于instance就是一个异步实例，所以可以省略一些

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

    return instance(config)
  })
}

配置拦截器

• 查看用户参数是否合法
• 查看用户请求是否携带token
• 每次请求网络时在界面上加上一个图标

import axios from 'axios'

// 最终方案
export function request(config) {
  return new Promise((resolve,reject)=>{
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000
    })
    // 拦截器
    instance.interceptors.request.use(config=>{
      console.log('interceptors')
    },err=>{

    })

    instance.interceptors.response.use(res=>{},err=>{})

    return instance(config)
  })
}