axios网络模块封装

 

 

 

 

 

一、axios封装

把请求到的结果回调出去（方式一）

// 把请求到的结果回调出去（方式一）
export function request(config, success, failure) {
  // 1.创建axios实例
  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);
    })
}

// 封装一个request模块
// 获取请求到的结果（方式一）
import { request } from './network/request';
request({
  url: '/home/multidata'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

 把请求到的结果回调出去（方式二）

// 把请求到的结果回调出去（方式二）
export function request(config) {
  // 1.创建axios实例
  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);
    })
}

// 获取请求到的结果（方式二）
import { request } from './network/request';
request({
  beseConfig: {
    url: '/home/multidata'
  },
  success: function (res) {
    console.log(res);
  },
  failure: function (err) {
    console.log(err);
  },
})

 把请求到的结果回调出去（方式三）

// 把请求到的结果回调出去（方式三）
export function request(config) {
  return new Promise((resolve, reject) => {
    // 1.创建axios实例
    const instance = axios.create({
      baseURL: 'http://123.207.32.32:8000',
      timeout: 5000,
    });
    // 发送真正的网络请求
    instance(config)
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      })
  });
}

// 获取请求到的结果（方式三、四）
import { request } from './network/request';
request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

 把请求到的结果回调出去（方式四）

// 把请求到的结果回调出去（方式四）
export function request(config) {
  // 1.创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000,
  });
  // 发送真正的网络请求
  return instance(config);
}

// 获取请求到的结果（方式三、四）
import { request } from './network/request';
request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

二、拦截器

// 2.axios的拦截器
  // A.请求拦截
  instance.interceptors.request.use(config => {
    console.log(config);
    // 拦截后要返回出去，不然后面得不到config
    // 请求拦截后做什么？
    //(1) 比如config中的一些信息不符合服务器的要求，需要对其进行一些变化之后再给服务器传过去
    //(2) 比如每次发送网络请求时，都希望在界面中显示一个loading的图标
    //(3) 某些网络请求，必须携带一些特殊的信息（如登录要携带token），如果没有携带，拦截掉，让其携带后再发送请求
    return config;
  }, err => {
    console.log(err);
  });
  // B. 响应拦截
  instance.interceptors.response.use(res => {
    console.log(res);
    // 可以只返回响应体data
    return res.data;
  }, err => {
    console.log(err);
  });