一、store的使用方式

store.js 是一个兼容所有浏览器的 LocalStorage 包装器，不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。

我们加载依赖的时候记得要把ts的也加载进来，毕竟项目是ts的。

npm install --save @types/store store

使用方法其实和cookejs是一样的，一般就有四种方法

set：存储 key 的值
get: 获取key 的值
remove: 删除key 的值
clearAll:清楚所有key

setToken

export function setToken (token: string): any {
  return store.set(TokenKey, token)
}

getToken

export function getToken (): any {
  return store.get(TokenKey)
}

removeToken

export function removeToken (): any {
  return store.remove(TokenKey)
}

clearAllKey

export function clearAllKey (): any {
  return store.clearAll()
}

二、axios的使用方式

这里只简单叙述以下，有想具体了解的可以访问官网www.axios-js.com/zh-cn/docs

安装依赖

安装的时候注意要把ts的也要安装上

npm install axios @types/axios

我们这里需要做的是在自己的项目中配置axios

使用

首先我们要创建一个axios的实例 create方法为我们创建了一个实例，baseURL是请求服务器 URL，timeout是指定请求超时的毫秒数(0 表示无超时时间)

const service = axios.create({
  baseURL: 'xxxx',
  timeout: 1000
})

之后我们需要使用两个拦截器

请求拦截器

service.interceptors.request.use((config) => {
  // 在发送请求之前做的处理
  return config
}, error => {
  // 对请求错误的处理
  return Promise.reject(error)
})

响应拦截器

service.interceptors.response.use((response) => {
  // 对响应数据做的处理
  return response
}, error => {
  // 对响应错误做的处理
  return Promise.reject(error)
})

然后我们导出service

export default service

整理状态码

于此同时，我们可以在响应拦截这里做一些处理，对基本的CODE做一些提示,

100：主要指信息响应
200：成功的回应
300：重定向消息
400：客户端错误响应
500：服务端错误响应

const STATUSLIST = [
  { status: -1, message: '远程服务响应失败,请稍后重试' },
  { status: 400, message: '400: 错误请求' },
  { status: 401, message: '401: 访问令牌无效或已过期' },
  { status: 403, message: '403: 拒绝访问' },
  { status: 404, message: '404：资源不存在' },
  { status: 405, message: '405: 请求方法未允许' },
  { status: 408, message: '408: 请求超时' },
  { status: 500, message: '500：访问服务失败' },
  { status: 501, message: '501：未实现' },
  { status: 502, message: '502：无效网关' },
  { status: 503, message: '503: 服务不可用' }
]

function checkStatus(response) {
  if (response) {
    const status = response.status
    if ((status >= 200 && status < 300) || status === 304) {
      return response.data
    } else {
      const errorMsg = STATUSLIST.filter(item => item.status === status)
      if (errorMsg.length < 1) {
        return {
          status,
          msg: `连接错误${status}`
        }
      } else {
        return {
          status,
          msg: errorMsg[0].message
        }
      }
    }
  }
  // 异常状态下，把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  }
}

然后我们在响应拦截中使用它。

代码修改后入下

// 响应拦截
service.interceptors.response.use((response) => {
  // 对响应数据做的处理
  return checkStatus(response)
}, error => {
  // 对响应错误做的处理
  return Promise.reject(checkStatus(error))
})

未完待续。。。。

搭建管理后台-5