VUE

VUE 记录(一) bug 报错 及解决

死循环

原因 函数内部 调用自己

解决方法 重新定义名字

解决登录失败不报错的问题

如下两种情况axios会主动抛出错误

如果本次请求得到的响应的状态码 不是2开头的（如：400，500）如果本次请求出现网络错误（如：断网，超时）

解决思路

在响应拦截器中，根据本次请求返回的数据中的success字段值，来决定是否主动抛出错误。

添加响应拦截器

// 响应拦截器
service.interceptors.response.use(response => {
  if (response.data.success) {
    //  *** 作成功
  } else {
    // 如果success为false 业务出错,直接触发reject 
    // 被catch分支捕获
    return Promise.reject(new Error('请求错误'))
  }
}, error => {
  return Promise.reject(error) // 返回执行错误 让当前的执行链跳出成功 直接进入 catch
})

解决获取有效数据代码冗余的问题 观察api的返回结果，我们发现axios在处理接口返回值时，默认会自动给包裹一个data字段，这导致我们每次在业务模块获取数据都需要写res.data.data.xxxx。

解决思路

在返回有效数据时，直接返回res.data

// 设置响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // 1. 判断 *** 作是否成功
  if(response.data.success === false) {
    // 本次 *** 作没有成功,抛出错误
    return Promise.reject(response.data.message)
  }
  // 2.  *** 作成功,脱壳: 去掉data
  return response.data;
  }, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

小结

响应拦截器用来处理后端接口返回的数据—脱壳处理。判断某个 *** 作是否在业务是成功的，需要根据后端接口返回值中某个特殊字段来判断，而不能只是依靠axios内置的报错机制 环境变量的配置文件

在一些特殊的配置文件中定义环境变量

在项目运行的过程中，通过不同的命令，能自动加载不同的配置文件，从而获取不同的环境变量。

定义环境变量-示例

格式： key = value key表示环境变量的名称 value表示环境变量的值

注意

以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中，建议我们自己定义的环境变量，都以它开头来定义

使用环境变量

定义好环境变量之后，项目启动之后，它会自动被集成到process.env这个属性中。

process.env.环境变量名

注意：修改服务的配置文件，必须要重新启动服务，才会生效

跨域-原因及解决方案

如果A地址和B地址在： 协议 域名 端口 不全相同，则说明请求是跨域的

跨域请报错的原因

跨域请求出现错误的条件： 浏览器同源策略 && 请求是ajax类型

解决方案

● 前端用JSONP方式去发请求（jsonp不是ajax请求）
● 后端写代码(CORS)在响应中添加必要的响应头，让响应回来之后浏览器不报错
● 代理转发

跨域-Vue-Cli配置代理转发

vue-cli解决跨域配置说明

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

特别强调：

ajax的基地址baseUrl必须是相对地址，而不能是绝对地址

token-处理

整体思路

token-处理-axios请求拦截器统一注入

token作为我们其它请求的用户标识，我们使用请求拦截器做一下统一处理，让每一个请求的header中都拥有token

token-处理-持久化

在utils/auth.js中，基础模板已经为我们提供了获取token，设置token，删除token这三个方法，完全可以直接使用。

import Cookies from 'js-cookie'
const TokenKey = 'hrsaas-ihrm-token' // 设定一个独一无二的key
export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

登录功能小结

登陆页，发请求到获得服务器响应的整个过程。

表单验证（login/index.vue）
a. utils/validate.js —> validMobile调用 api/user.js中封装好的api
a. 找到axios实例：utils/request.js中获取axios实例
b. 设置基地址，从环境变量中拼接收集用户的参数，传给上一步中的api。（页面上收集页面的数据项名与接口中一致）经过请求拦截器，添加请求头（添加token， utils/request.js）代理转发(vue.config.js)线上接口/本地接口：后端服务器要启动，mongoDB也要启动；后端收到请求，返回数据经过响应拦截器的处理(utils/request.js)
a. 判断当前 *** 作是否成功，决定是否axios报错
b. 简化获取有效数据的写法(脱壳)得到api调用之后结果（login.vue）保存token到vuex（store/modules/user.js）token做持久化(utils/auth.js)