Axios的封装使用

封装一个request.js，目前暂时将使用放在main.js。
baseURL的使用是由于在项目开发中许多接口的前缀一致，所以可以用baseURL将前缀代替。
方式一：

//request.js
export function request(config,success,failure) {  // 如果想把结果回调出去，举例加上success和failure
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'a',
    timeout: 5000
  })
  // 发送真正的网络请求
  instance(config)
    .then(res => {
        success(res)    // 回调出去
    }).catch(err => {
        failure(err)    // 回调出去
    })
}

//main.js
request(
  // 第一个参数
  {
  url: '/b/c'
  },  
  // 第二个参数
  res => {       // 对应request.js方式一中的success函数
  console.log(res);
  }),
  // 第三个参数
  err => {       // 对应request.js方式一中的catch函数
  console.log(err);
}

方式二：

// request.js
export function request(config) {   
  // 创建axios的实例
  const instance = axios.create({
    baseURL: 'a',
    timeout: 5000
  })
  // 发送真正的网络请求
  instance(config.baseConfig)
    .then(res => {
        config.success(res)
    }).catch(err => {
        config.failure(err)
    })
}

// main.js
request({   // 三个参数集成一个对象返回
  baseConfig: {
    url: '/b/c'
  },
  success: function(res) {
    console.log(res);
  },
  failure: function(err) {
    console.log(err);
  }
})

方式三:

// request.js
export function request(config) {
    return new Promise((resolve,reject) => {
        // 创建axios的实例
        const instance = axios.create({
            baseURL: 'a',
            timeout: 5000
        })
        // 发送真正的网络请求       
        instance(config)
            .then(res => {
                resolve(res)
            }).catch(err => {
                reject(err)
            })
    })    
}

// main.js
request({
  url: '/b/c'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

方式四：

// request.js
export function request(config) {
    // 1.创建axios的实例
    const instance = axios.create({
        baseURL: 'a',
        timeout: 5000
    })
    // 2.axios的拦截器
    
    // 2.1 什么情况下需要进行拦截 =》 1.比如config中的一些信息不符合服务器要求。  2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标   3.某些网络请求，比如登陆，必须要携带一些特殊的信息
    
    // axios.interceptors    // 全局拦截器
    // instance.interceptors     // 只拦截instance这个实例

    // 2.2 请求拦截
    instance.interceptors.request.use(aaa => {   // 返回的参数（各种配置），名字可以自己命名，这个并不是数据信息，数据信息在main.js中打印
      console.log("返回配置信息",aaa);
      return aaa    // 这里的aaa一定要返回出去
    },err => {   // 错误信息，如果请求都没有发送出去，就会来到这里
      console.log("错误信息",err);
    })     // 拦截instance这个实例的请求,use是使用的意思,有两个参数，两个参数都是函数

    // 2.3 响应拦截 
    instance.interceptors.response.use(res => {  // 由于服务器已经响应过了，所以这里拿到的是结果，而不是配置信息
      console.log("返回的数据",res);
      return res.data   // 将想要的结果返回
    },err => {    // 获取失败
      console.log("错误信息",err);
    })     // 拦截instance这个实例的响应,use是使用的意思

    // 3.发送真正的网络请求
    return instance(config)   // 实际上返回一个promise
}

// main.js
request({
  url: '/b/c'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);   // 由于在request.js中进行了请求的拦截，如果那边没有进行aaa的返回，那么这里直接报错，所以拿不到数据。这里的err就会执行
})