vue中封装axios的方法以及如何使用

封装axios

在vue中常用的请求方式就是axios，下面讲解axios的封装方式

第一步，需要引入axios

import axios from 'axios'//引入axios
import router from '../router/index'//引入路由

第二步，定义新的axios

let instance = axios.create({
    timeout:10000,//请求时间超过10000ms就中断
    baseURL:'/api',
})

注意：这里可将baseURL放入其中，便于代码的统一，也可将其放入main文件中
第三步，设置请求拦截

instance.interceptors.request.use(req=>{
    let token = sessionStorage.getItem('token')
    token && (req.headers['Authorization']=`Bearer ${token}`)
    return req
},error => Promise.reject(error))

注意：

1. 每次发起请求之前需要获取token，token可以用sessionStorage或localStorage存在本地，也可以在vuex中获取token
2. 如果有token，将token保存在请求的header上，发送给后台验证
3. token && (req.headers['Authorization']=Bearer ${token}) 也可换成if(token !==undefined){ req.headers['Authorization']=Bearer ${token}}

第四步，请求之后

instance.interceptors.response.use(response=>{
    response.data.token &&sessionStorage.setItem('token',response.data.token)
    return response
},error => {
    let _response = error.response
    switch (_response.status) {
        case 401:
            sessionStorage.removeItem('userName')
            sessionStorage.removeItem('userId')
            sessionStorage.removeItem('loginTime')
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('power')
            alert('身份过期，请重新登录')
            return router.push('/login')
        case 404: alert('服务器未找到相关资源');
    }
    return Promise.reject(error.response.data)
})

注意：

1. 请求后一般会将token保存在本地
2. switch 用于处理服务器的报错信息，可根据项目需求酌情添加

第五步，公开

export default instance

第六步，使用
个人习惯于在store中发起请求，因此引用封装好的axios的路径会有些许不同

1. 首先是引用封装好的axios文件

import http from '../http/http'//由于我封装的axios文件名为http，所以这里就沿用了

2. 在actions里调用，以登录为例

actions: {
    userLogin({commit},obj){
      let userData = {
        userName:obj.name,
        userId:'',
        loginTime:'',
        token:'',
        power:'',
      }
      return http({
        url:url.userLogin,//url.userLogin为封装好的接口地址
        method:'post',//请求方式，需要与后台协商
        data:obj,
      }).then(resp=>{
        if(resp.data.Code === 200){
          userData.token = resp.data.token
          userData.userId = resp.data.StaffId
          userData.loginTime = resp.data.LoginTime
          userData.power = resp.data.Power
          commit('userLoginData',userData)//调用mutations里的方法，将请求回的数据存在vuex中
          sessionStorage.setItem('userName',userData.userName)//将数据存在本地
          sessionStorage.setItem('userId',userData.userId)
          sessionStorage.setItem('loginTime',userData.loginTime)
          sessionStorage.setItem('power',userData.power)
          sessionStorage.setItem('token',userData.token)
        }
        return resp.data//将数据返回到页面
      }).catch(err=>{
        return err
      })
 }