【观】020，关于 Axios 和 Vue 的几个问题

01。Axios的包裹

(1) Axios介绍

import axios from 'axios'
 

(2) 创建

的实例

const request = axios.create({
    // 配置项
})
 

（a）关于配置项：

• baseURL：请求地址前缀，该前缀将自动添加在 URL

  之前
  • 开发环境和生产环境通常是有区别的

  • 因此需要根据不同的环境切换不同的bseURL

  baseURL: process.env.NODE_ENV === 'production' ? '/production' : '/development'
   

• timeout：设置默认请求超时时间（以毫秒为单位）。如果超过这个时间，请求就会失败

  timeout: 10000
   

（3）请求拦截

• 发送请求之前，捕获请求并在这里做一些数据处理
  • 一般用于在请求头中添加Token来判断登录状态

// 请求拦截器 request
request.interceptors.request.use(    
    config => {
        // 拦截之后做一些处理。如：判断是否有token
        const token = localStorage.getItem('token')
        if(token){
            // 如果有token，则在请求头中添加token
            config.headers['X-Token'] = token
        }
        // 处理完后必须返回 config
        return config
    },    
    error => {
        return Promise.reject(error)
    })
}
 

（4）响应捕获

• 捕获服务器返回给我们的数据，并在检索之前执行一些数据处理和评估。
  • 主要用于误差的统一求解

// 响应拦截器 response
request.interceptors.response.use(
    // 请求成功
    response => {
        if (response.status === 200) {  
            // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
            return Promise.resolve(response);        
        } else {  
            // 否则的话抛出错误
            return Promise.reject(response);        
        }
    },
    // 请求失败
    error => {
        // 对其它返回错误做操作。如401、403、404等
        return Promise.reject(error)
    }
)
 

(5) 要求

• 可以封装get和post需求，但我个人习惯这样写

// api.js
import request from '@/utils/request'

export default getList(params){
    return request({
        url: '/',
        method: 'get',
        params
    })
}

export default postList(data){
    return request({
        url: '/',
        method: 'post',
        data
    })
}
 

(6) 使用

• 直接导入API文件即可使用。可全球进口或根据要求进口

import { getList, postList } from '@/api/api.js'

getList(params).then(res => {
    // ...
}).catch(error => {
    // ...
})
 

---

（7）决赛

// request.js
import axios from 'axios'

const request = axios.create({
    baseURL: process.env.NODE_ENV === 'production' ? `/` : '/apis', // 配置基准地址
    headers: {
        get: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        post: {
            'Content-Type': 'application/json;charset=utf-8'
        }
    },
    timeout: 30000, // 配置超时时间
})

// 请求拦截器
request.interceptors.request.use(
    config => {
        return config
    }, 
    error => {
        // 错误抛到业务代码
        error.data = {}
        error.data.msg = '服务器异常，请联系管理员！'
        return Promise.resolve(error)
    }
)

// 响应拦截器
request.interceptors.response.use(
    // 请求成功
    response => {
        const status = response.status // 获取状态码
        let msg = ''
        if (status < 200 || status >= 300) {
            // 处理http错误，抛到业务代码
            msg = showStatus(status)
            if (typeof response.data === 'string') {
                response.data = { msg }
            } else {
                response.data.msg = msg
            }
        }
        return response
    }, 
    // 请求
    error => {
        console.log('err' + error)
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

const showStatus = status => {
    let message = ''
    switch (status) {
        case 400:
            message = '400:请求错误'
            break
        case 401:
            message = '401:未授权，请重新登录'
            break
        case 403:
            message = '403:拒绝访问'
            break
        case 404:
            message = '404:请求资源不存在'
            break
        case 405:
            message = '405:请求方法不允许'
        case 408:
            message = '408::请求超时'
            break
        case 500:
            message = '500:内部服务器错误'
            break
        case 501:
            message = '501:服务未实现'
            break
        case 502:
            message = '502:网络错误'
            break
        case 503:
            message = '503:服务不可用'
            break
        case 504:
            message = '504:网络超时'
            break
        case 505:
            message = 'HTTP版本不受支持(505)'
            break
        default:
            message = `连接错误，错误代码:(${status})!`
    }
    return `${message}，请检查网络或联系管理员！`
}

export default request

 

02。如何在Vue中重置数据？

• 用途：Object.assign(newObj, oldObj)

  • this.$data：获取当前状态的数据
  • this.$options.data()：获取组件的
  数据到初始状态

  Object.assign(this.$data, this.$options.data())
  
  // 如果只是重置某一个属性
  this.id = this.$options.data().id;
   

03。为什么数据在函数组件中？

• 由于组件中JavaScript 的属性，data必须以函数的形式存在，不能是对象

  • 以函数的返回值的形式定义。每次 重用组件 时，都会返回 新数据
  的新副本。
  • 以对象形式定义，组件的所有实例将共享数据，因为对象是引用类型

• 为了保证组件不同实例之间的数据不冲突，data必须是功能

04。 【vue-loader】有什么作用？

• 作用：基于Webpack的加载器，可以解析和转换.vue文件

  • 提取标签template、script、style中的代码并传递给相应的加载器进行处理并转换为JS模块

05。 【保活】的作用是什么？

• keep-alive 是一个内置的 Vue 组件，允许包含的组件 保留其状态、进入缓存并避免重新渲染

06。什么是 Vue.use？

• vue.use用于使用插件，我们可以在其中扩展全局组件、指令、原型方法等。

• Vue.js 的插件应公开 install 方法。该方法的第一个参数是构造函数Vue，第二个参数是用于传递插件配置的可选选项对象

  MyPlugin.install = function (Vue, options) {
      // 1. 添加全局方法或属性
      Vue.myGlobalMethod = function () {
          // 逻辑...
      }
      // 2. 添加全局资源
      Vue.directive('my-directive', {
          bind (el, binding, vnode, oldVnode) {
              // 逻辑...
          }
          ...
      })
      // 3. 注入组件选项
      Vue.mixin({
          created: function () {
              // 逻辑...
          }
          ...
      })
      // 4. 添加实例方法
      Vue.prototype.$myMethod = function (methodOptions) {
          // 逻辑...
      }
      // 5. 注册全局组件
      Vue.component('myButton',{
          // ...组件选项
      })
  }
  
  // --------------
  Vue.use(MyPlugin, {
      // 参数
  })
  
   

  使用Vue.use()时，会调用插件内部的方法install

  如果插件
  • 进入对象，则执行其install方法
  。
  • 如果它是一个函数，它会执行自身并且bind this 是null，然后将更多参数传递给

07。如何在 Vue 实例上附加属性/方法？

• 使用 Vue.prototype.$xx 将属性/方法添加到任何实例都可以读取的 Vue 原型

08。单页 SPA 的优点和缺点是什么？

• 概念：SPA是single-page application仅在页面初始化时加载相应的HTML、JavaScript和CSS
  • 页面一旦加载，SPA不会因为用户操作而重新加载或跳过页面
  • 相反，路由机制用于实现 HTML 内容转换、UI-用户交互和避免页面重新加载
• 优点：
  • 1）用户体验好、速度快。内容的改变不需要重新加载整个页面，从而避免了不必要的跳转和重复渲染
  • 2）SPA比服务器压力小
  • 3）前后端职责分离，结构清晰，前端交互逻辑，后端负责数据处理
• 缺点：
  • 1）首屏（初始）加载慢：为了实现单页Web应用功能和显示效果，页面加载时必须均匀加载JavaScript和CSS，部分页面按需加载
  • 2）对SEO没有贡献：由于所有内容都是动态替换并显示在一个页面上，因此在SEO方面有天然的弱点

---

我是前面的一只小鸡，如有错误请谅解