axios的封装

大佬的高级axios封装

安装使用

安装：npm install axios --save
使用：import axios from 'axios'

1.回调函数封装

// 回调函数的形式
export function request1(config){
   // 1.创建axios的实例
   const instance = axios.create({
    baseURL:'https://123.207.32.32:8000',
    timeout:5000
    })
    // 发送真正的网络请求
    instance(config.baseconfig).then(data => {
        config.success(data)
    }).catch(err =>{
        config.failure(err)
    })
}

request1({
    baseconfig:{
    	url:'/home/multidata'
    },
    success:function(data){
        console.log(data)
    },
    failure:function(err){
        console.log(err);
    }
})

2.promise形式的axios的封装

// promise形式的axios的封装
export function request1(config){
    return new Promise((resolve,reject) =>{
        // 1.创建axios的实例
        const instance = axios.create({
            baseURL:'https://123.207.32.32:8000',
            timeout:5000
        })
        // 发送真正的网络请求
       instance(config).then(data => {
           resolve(data)
       }).catch(err =>{
            reject(err)
       })
    })
}
request1({
    url:'/home/multidata'
})

3、最常用

export function request1(config){
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL:'https://123.207.32.32:8000',
        timeout:5000
    })
    // 发送真正的网络请求
  return  instance(config)
}

request1({
    url:'/home/multidata'
})

4.结合拦截器

• 拦截器分为请求拦截器和响应拦截器
• 请求拦截器有什么用？
  • 比如config中的一些信息不符合服务器的要求
  • 比如每次发送网络请求时，都希望再界面中显示一个请求的图标 小圆圈加载图标，然后再响应拦截器的成功函数设置这个图标隐藏掉
  • 某些网络请求（登陆（token））,必须携带一些特殊的信息，如果用户发送请求，没有登陆，就跳转到登陆界面
• 响应拦截器有什么用？
  • 一般做一些数据的处理
  • 对响应的状态进行处理，如果是500，则跳转到500的页面
  • 隐藏掉小圆圈加载图标

export function request1(config){
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL:'https://123.207.32.32:8000',
        timeout:5000
    })
    // 2.拦截器
    // 请求拦截器
    instance.interceptors.request.use(config =>{
        //config 是请求的信息，如：url,headers
        // 有什么作用？
        //1. 比如config中的一些信息不符合服务器的要求
        //2. 比如每次发送网络请求时，都希望再界面中显示一个请求的图标 小圆圈加载图标
            //然后再响应拦截器的成功函数设置这个图标隐藏掉
        //3. 某些网络请求（登陆（token））,必须携带一些特殊的信息，如果用户发送请求，没有登陆，就跳转到登陆界面

        // 处理完成之后，返回config
        return config
    },err => {
        // 打印错误信息
        console.log(err)
    })
    // 响应拦截器
    instance.interceptors.response.use(rs => {
        // rs表示的是 服务器返回的结果
        // 有什么用？
        // 1.一般做一些数据的处理
        // 2.对响应的状态进行处理，如果是500，则跳转到500的页面
        return rs.data
    },err => {
        // 打印错误
        console.log(err);
        
    })
    // 3.发送真正的网络请求
  return  instance(config)
}