vue中API接口的管理详解（附登录案例）

前言

对axios有所了解的可跳过前言
在项目中，和后台交互数据这块，有三个流行的库。

1、jQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
})

jQuery ajax是对原生XMLHttpRequest对象的封装，除此之外还添加了对JSONP的支持（用于解决跨域问题）,使用起来非常简单，传入参数即可。不过对于现在的MVVM项目来说，jq是不太适合的。原因如下：

• jQuery是针对MVC模式的，不符合现在MVVM模式的浪潮
• 单纯想使用ajax的话也必须引入整个jQuery库，体积太大不合理
• 不符合关注分离的原则

2、fetch

try{
  let  response = await fetch(url)
 let data = response.json()
  console.log(data)
}

fetch号称是ajax的替代品，是ES6出现的，使用了ES6中的promise对象。注意：fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象

fetch优点：

• 符合关注分离的原则，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
• 基于Promise实现，支持asynv/await，写法简洁
• 脱离了XHR，是ES规范里新的实现方式

fetch缺点：

• fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
• fetch默认不会带cookie，需要添加配置项
• fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
• fetch没有办法原生监测请求的进度，而XHR可以

总的来说，fetch是底层的 API，可以把它当做原生的XHR，所以我们使用的时候还要像处理原生ajax一样进行封装

3、axios

axios({
  method: 'post',
    url: '/user/12345',
    data: {
        username: 'Ciger',
        password: 'abc123'
    }
}).then(res => console.log(res) )
  .catch(err => console.log(err))

Vue2.0,之后，推荐大家使用axios替换Jquery ajax。
axios是一个基于Promise用于浏览器和node.js的HTTP客户端，本质上也是对原生XHR的封装，不过它是Promise的实现版本，符合最新的ES规范。

优点：

• 拦截请求和相应
• 设置超时时间
• 自动转换JSON数据
• 客服端支持防CSRF

封装axios

axios封装了原生的XHR，让我们发送请求更为简单，但假设在一个成百上千个vue文件的项目中，我们每一个vue文件都要写axios.get()或axios.post()岂不是很麻烦？后期的维护也不方便，所以我们要对axios进行进一步的封装。

vue-cli项目的目录如上，我们在原有的目录基础上新建api与utils文件夹，utils里新建request.js文件，request.js代码如下：

import axios from 'axios'
import {
  Message,
  Loading
} from 'element-ui' //项目中我用了element-ui组件库，Message是一个消息弹框，Loading是加载图,按需导入

import router from '../router/index.js'  //注意路径与文件名

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url, url = base_url + request_url
  timeout: 50000 // request timeout
})

let loading // 定义loading变量

function startLoading () { // 使用Element loading-start 方法
  loading = Loading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

function endLoading () { // 使用Element loading-close 方法
  loading.close()
}

// 请求拦截  设置统一header
service.interceptors.request.use(
  config => {
    // 加载
    startLoading()
    if (localStorage.eleToken) {
      config.headers.Authorization = localStorage.eleToken
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截  401 token过期处理
service.interceptors.response.use(
  response => {
    endLoading()
    return response
  },
  error => {
    // 错误提醒
    endLoading()
    Message.error(error.response.data)

    const { status } = error.response
    if (status === 401) {
      Message.error('token值无效，请重新登录')
      // 清除token
      localStorage.removeItem('eleToken')

      // 页面跳转
      router.push('/login')
    }

    return Promise.reject(error)
  }
)

export default service

在request.js中做了三件事

1. 创建axios，设置baseURL与超时时间

const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 50000 // request timeout
})

2. 拦截请求

service.interceptors.request.use(
  config => {
    // 加载
    startLoading()
    //此处可统一设置请求头 ....
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

3. 拦截响应

service.interceptors.response.use(
  response => {
    endLoading()
    return response
  },
  error => {
    // 错误提醒
    endLoading()
    Message.error(error.response.data)
   //此处可对状态码做一个判断
   // 跳转回登录界面
    //router.push('/login')
    }

    return Promise.reject(error)
  }
)

baseURL的设置在config/dev.env.js中，实际访问的url = baseUrl + requsetUrl
项目中我用了element-ui组件库，Message是一个消息弹框，Loading是加载图

登录案例

封装完了axios，我们通过一个登录案例来看看如何在项目中使用。

登录首先撸个界面，放两个input框和一个button
撸完界面我们在来到api文件夹，建立一个login.js

//login.js
import request from '@/utils/request'
import qs from 'qs'

export function doLogin (username, password) {
  let data = {
    username,
    password
  }
  data = qs.stringify(data)
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

我这里引入了qs库，qs.stringify()可以将对象转成字符串形式，这是因为后台接口的要求，一般来说axios传入data对象即可
代码里有一个doLogin方法，接收两个参数：用户名和密码
然后直接调用request.js中封装的axios发送post请求

 return request({
    url: '/user/login',
    method: 'post',
    data
  })

我们再回到登录界面中，
首先把doLogin方法引进来

import { doLogin } from '@/api/login'

然后给按钮绑定如下事件：

 submit () {
   doLogin(this.username, this.password).then(res => {
            console.log(res)
            if (res.data.resultCode === 200) {
              const token = 'token'
              Message.success('登录成功')
              // 存储token到浏览器
              localStorage.setItem('eleToken', token)
              this.$router.push('/')
            } else {
              Message.error(res.data.resultMsg)
              console.log('错误')
            }
          })
    }

上面代码就是调用 doLogin 方法，判断回调中res 的状态，登录成功则存储token，跳转页面。失败则提示错误

路由拦截

上面实现了登录的功能，但还不够完善，仅仅这样做，未登录的用户直接在浏览器中输入地址不是一样可以访问页面？
这个问题也不难解决，vue-router 为我们提供了 router.beforeEach

来到 router.js

router.beforeEach((to, from, next) => {
  let isLogin = !!localStorage.eleToken
  if (to.path === '/login' || to.path === '/register') {
    next()
  } else {
    isLogin ? next() : next('/login')
  }
})

加上如上代码，通过localStorage判断是否登录，如果路径不是登录注册的页面，则强制跳回登录界面