Axios

Axios二次封装

二次封装的目的

1.便于维护

2.统一实现
封装实现，形成特有的api，可统一项目代码规范，不然每次使用都得引入axios,当后台改接口地址的时候还得满页面找

3.程序复用

二次封装的效果

1.封装成插件使用

2.统一api请求

3.可以暴露接口由使用方配置请求头拦截器

封装实现

import axios from 'axios'        //引入axios
import { getToken } from "../utils/index";    //引入登录态
// create an axios instance
const service = axios.create({
  baseURL: 'http://169.254.12.174:7001/',
  // withCredentials: true, // 跨域请求时发送 cookies   表示跨域请求时是否需要使用凭证
  timeout: 5000 // request timeout  如果请求超过5000，请求将会中断
})

// request interceptor  请求拦截
service.interceptors.request.use(
  config => {
    // 判断是否有登陆态
    if (getToken()) {
    //可以添加一些请求头信息，或者登陆态
      // 让每个请求携带authorization
      config.headers['authorization'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  response => response.data,
  error => {
    return Promise.reject(error)
    // message.error(error.message);
  }
)

export default service

Cookie

import Cookie from "js-cookie"
//添加名字：
let key="authorization" //authorization 授权，
//设置cookie----过期时间
export function setToken(value){
    let date=new Date()
    let endTime = new Date()*1 + 10*60*60*1000;
    date.setTime(endTime);
    Cookie.set(key, value, {expires: date})
}
//获取cookie
export function getToken(){
   return  Cookie.get(key)
}
//删除cookie
export function removeToken(){
    Cookie.remove(key)
}