Axios 封装网络请求

1 简介

通过Axios的请求拦截器和响应拦截器实现登录拦截，参数封装。

注意：前提是你的vue已经安装了Axios。

附安装代码：

bash 复制代码

npm install axios

2 封装代码

2.1 utils文件夹下创建 request.js

javascript 复制代码

// 网络请求方法
import axios from 'axios'
import router from '@/router'

// 自定义axios对象  （ajax对象就是axios）
const ajax = axios.create({
    baseURL: 'http://请求IP地址:端口/api', // 服务器基地址
    headers: {
        'Content-Type': 'application/json; charset=utf-8'
    },
    timeout: 10000
})

// 添加请求拦截器，判断token是否过期
// 请求拦截器
// 设置axios请求头加入token
ajax.interceptors.request.use(
    config => {
        // 判断是否有token（是否已经登录），不是请求token,就对请求添加token
        if (localStorage.getItem('token') && config.url !== 'admin/auth/token') {
            //在请求头加入token，名字要和后端接收请求头的token名字一样
            config.headers.authorization = localStorage.getItem('token')
        }
        // 根据请求方法自动选择传递参数的方式
        // get delete 传递params参数
        // post，put，patch 传递data参数
        if (config.method === 'post' || config.method === 'put' || config.method === 'patch') {
            config.data = config.params
        }

        return config
    },
    error => {
        return Promise.reject(error)
    })

// 响应拦截器
ajax.interceptors.response.use(
    response => {
        // 判断是否登录成功
        if (response.data.code === 0) {
            console.log(response.data.msg || '请求出错,稍后重试')
        }
        return response.data
    },
    error => {
        // Token过期，请求响应 401 时，用户手动获取token，强制跳转登录页面
        if (error.response && error.response.status === 401) {
            //清除token
            localStorage.removeItem('token')
            console.log('登录失效，请重新登录')
            //跳转
            router.push('/login')
        } else {
            console.log('服务器连接异常')
        }
        return Promise.reject(error)
    })

export default ajax  // 导出一个axios函数

2.2 api文件夹下创建index.js

请求的统一出口。

javascript 复制代码

// 登录为例，获取token，获取账户信息
import {recommendToken, authInfo} from './login'

export default {
    recommendToken,
    authInfo
}

2.3 api文件夹下创建login.js

存放所有的登录请求

javascript 复制代码

// 封装发起的请求
import request from '@/utils/request'

// 封装网络请求方法
export const recommendToken = params => request({
    url: 'admin/auth/token',
    method: 'POST',
    params
})

export const authInfo = param => request({
    url: 'admin/auth/AuthInfo',
    method: 'GET',
    param
})

3 使用

javascript 复制代码

api.recommendToken({
  userName: this.username,
  password: this.password
}).then(res => {
 // 请求数据处理
  const token = res.data.accessToken
  // 存储token
  localStorage.setItem('token', 'Bearer ' + token)
  // 跳转到首页
  this.$router.push('/')
}).catch(error => {
 // 错误捕获
  console.log('服务器错误：' + error.message)
}).finally(() => {

})

api.authInfo().then(res => {
 // 请求完成后逻辑
 ......
}).catch(error => {
 // 错误捕获
  console.log(error)
})