【学习打卡】第3天 Vue Element+Node.js开发企业通用管理后台系统（第9章）

课程名称：Vue Element+Node.js开发企业通用管理后台系统(第9章)
课程章节： 第9章 登录功能开发（中）
主讲老师：Sam
课程内容：

今天学习的内容包括：

• axios 基本使用

对 axios 的基本使用以及实际项目中的封装要点进行说明，视频中使用的是提供的 request 库，其实就是对 axios 的封装。

课程收获：

1. axios 的使用

Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。axios 本质上也是对原生XHR的封装，只不过它是Promise 的实现版本，符合最新的 ES 规范。开始学习 axios 使用前，先了解下早期的写法如何，大致代码如下：

let xhr = new XMLHttpRequest()
xhr.open('GET', '/api/xx')
xhr.send()
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    alert(xhr.responseText)
  } else {
    alert(xhr.statusText)
  }
}

而实际在编写的时候可能会是下面这样：

//情况一：自己封装 AJAX 函数
function myAjax(obj){
    //todo
}

//情况二：jQuery AJAX or 其他第三方库
$.get('/api/xx')
$.post('/api/xx',{})
$.ajax({})

axios.get('/api/xx',{}).then(){}

显然这样的编码会使我们代码变得更加简洁。下面看下 axios 的基本用法：

import axios from 'axios'

const url = 'https://test.youbaobao.xyz:18081/book/home/v2?openId=1234'
axios.get(url).then(response => {
  console.log(response)
})

上述代码可以改为：

const url = 'https://test.youbaobao.xyz:18081/book/home/v2'
axios.get(url, { 
  params: { openId: '1234' }
})

如果我们在请求时需要在 http header 中添加一个 token，需要将代码修改为：

const url = 'https://test.youbaobao.xyz:18081/book/home/v2'
axios.get(url, { 
  params: { openId: '1234' },
  headers: { token: 'abcd' }
}).then(response => {
  console.log(response)
})

如果要捕获服务端抛出的异常，即返回非 200 请求，需要将代码修改为：

const url = 'https://test.youbaobao.xyz:18081/book/home/v2'
axios.get(url, { 
  params: { openId: '1234' },
  headers: { token: 'abcd' }
}).then(response => {
  console.log(response)
}).catch(err => {
  console.log(err)
})

这样改动可以实现我们的需求，但是有两个问题：

• 每个需要传入 token 的请求都需要添加 headers 对象，会造成大量重复代码
• 每个请求都需要手动定义异常处理，而异常处理的逻辑大多是一致的，如果将其封装成通用的异常处理方法，那么每个请求都要调用一遍

通过 axios.create 进行重构

const url = '/book/home/v2'
const request = axios.create({
  baseURL: 'https://test.youbaobao.xyz:18081',
  timeout: 5000
})
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
})

首先我们通过 axios.create 生成一个函数，该函数是 axios 实例，通过执行该方法完成请求，它与直接调用 axios.get 区别如下：

• 需要传入 url 参数，axios.get 方法的第一个参数是 url
• 需要传入 method 参数，axios.get 方法已经表示发起 get 请求

axios 请求拦截器

上述代码完成了基本请求的功能，下面我们需要为 http 请求的 headers 中添加 token，同时进行白名单校验，如 /login 不需要添加 token，并实现异步捕获和自定义处理：

const whiteUrl = [ '/login', '/book/home/v2' ]
const url = '/book/home/v2'
const request = axios.create({
  baseURL: 'https://test.youbaobao.xyz:18081',
  timeout: 5000
})
request.interceptors.request.use(
  config => {
    // throw new Error('error...')
    const url = config.url.replace(config.baseURL, '')
      if (whiteUrl.some(wl => url === wl)) {
        return config
      }
    config.headers['token'] = 'abcd'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
}).catch(err => {
  console.log(err)
})

这里核心是调用了 request.interceptors.request.use 方法，即 axios 的请求拦截器，该方法需要传入两个参数，第一个参数是拦截器方法，包含一个 config 参数，我们可以在这个方法中修改 config 并且进行回传，第二个参数是异常处理方法，我们可以使用 Promise.reject(error) 将异常返回给用户进行处理，所以我们在 request 请求后可以通过 catch 捕获异常进行自定义处理

axios 响应拦截器

下面我们进一步增强 axios 功能，我们在实际开发中除了需要保障 http statusCode 为 200，还需要保证业务代码正确，上述案例中，我定义了 error_code 为 0 时，表示业务返回正常，如果返回值不为 0 则说明业务处理出错，此时我们通过 request.interceptors.response.use 方法定义响应拦截器，它仍然需要2个参数，与请求拦截器类似，注意第二个参数主要处理 statusCode 非 200 的异常请求，源码如下：

const whiteUrl = [ '/login', '/book/home/v2' ]
const url = '/book/home/v2'
const request = axios.create({
  baseURL: 'https://test.youbaobao.xyz:18081',
  timeout: 5000
})
request.interceptors.request.use(
  config => {
    const url = config.url.replace(config.baseURL, '')
    if (whiteUrl.some(wl => url === wl)) {
      return config
    }
    config.headers['token'] = 'abcd'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

request.interceptors.response.use(
  response => {
    const res = response.data
    if (res.error_code != 0) {
      alert(res.msg)
      return Promise.reject(new Error(res.msg))
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }
)

request({
  url, 
  method: 'get',
  params: {
    openId: '1234'
  }
}).then(response => {
  console.log(response)
}).catch(err => {
  console.log(err)
})

最后附上课程图片 ending~