axios链式请求

const axios = require('axios')

// 全局配置文件
axios.defaults.baseURL = 'https://httpbin.org';
axios.defaults.timeout = 100000;

console.log('第一次异步请求数据：/json');
axios.get('/json').then(response =>{
  const author = response.data.slideshow.author
  console.log('第一次异步请求返回的数据：' + author);
  const authorBase64 = Buffer.from(author).toString('base64');
  console.log('第二次异步请求数据：' + author+': '+ authorBase64 );
  // 通过异步获取到的数据请求其它数据
  return axios.get("/base64/" + authorBase64)
}).then(response => {
  console.log('第二次异步请求返回的数据：' + response.data);
  console.log('第三次异步请求数据：/delay/1');
  return axios.get("/delay/1")
}).then(response => {
  console.log('第三次异步请求返回的数据：' + response.data.url);
}).catch(err => {
  console.log('异常数据：' + err);
})

axios的实例

为什么要创建实例

之所以要创建axios实例，是因为我们实际工作项目中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。
所以不建议使用全局配置

创建实例

const axios = require('axios')

const instance1 = axios.create({
  baseURL: 'https://httpbin.org',
  timeout: 100000
})

const instance2 = axios.create({
  baseURL: 'http://myip.ipip.net',
  timeout: 100000
})

instance1.get('/json')
.then(res => {
  console.log('instance1:');
  console.log(res.data);
})

instance2.get('/')
  .then(res => {
    console.log('instance2:');
    console.log(res.data);
  })

模块封装

为什么要封装模块

当使用的三方模块出现严重bug(或者不维护的时候)，可以修改自己的封装模块替换三方模块即可，而不需要在项目每个引用三方模块的地方进行修改
不封装的话，基本上不可控
封装要求：不要体现出模块本身的方法，否则照样不可控

封装模块(非最终方案)

// 封装一个request模块，注意不要使用全局配置文件
// 此方案适用于三方模块没有实现Promise方法
// vim request.js

const axios = require('axios')

export function request(config) {
  return new Promise((resolve, reject) =>{
    // 创建axios实例
    const instance = axios.create({
      baseURL: 'https://httpbin.org',
      timeout: 100000
    })

    // 发送真正的网络请求
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
      })
  })
}

封装模块(最终方案)

// axios的最终方案
const axios = require('axios')

export function request(config) {
  // 创建axios实例
  const instance = axios.create({
    baseURL: 'https://httpbin.org',
    timeout: 100000,
  })

  // 发送真正的网络请求(axios本身就实现了Promise-->AxiosPromise)
  return instance(config)
}

使用模块

import  {request} from './request'

request({
  url: '/json'
}).then(res => {
  console.log(res.data);
}).catch(err => {
  console.log(err);
})

拦截器

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://myip.ipip.net',
  timeout: 100000,
})

// 配置请求拦截器
instance.interceptors.request.use(config => {
  // 1、config修改，比如修改header
  // 2、每次发送网络请求是，都希望在页面展示一个转菊花的图标
  // 3、携带请求的token(没有则跳转到登录页面)
  console.log('来到了request拦截success拦截器中');
  return config
}, err => {
  console.log('来到了request拦截failure拦截器中');
  // 这里返回：return err的话不具有Promise的方法
  return Promise.reject(err)
})

// 配置响应拦截器
instance.interceptors.response.use(response => {
  // 1、判断返回的状态码异常，直接抛出异常给浏览器
  console.log('来到了response拦截success拦截器中');
  // 这里可以处理数据，比如加一个参数什么的
  return response.data
}, err => {
  console.log('来到了response拦截failure拦截器中');
  // 这里返回：return err的话不具有Promise的方法
  return Promise.reject(err)
})

instance({
  url: '/',
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
  console.log('异常');
})