axios 简易封装

简易封装axios

Axios 是一个基于 promise 网络请求库，作用于node.js (opens new window)和浏览器中；

封装axios首先下包

npm i axios

在vue中使用axios 在下包后在src目录下新建一个request文件放置axios拦截器

在请求和响应的时候进行一些操作

请求时可以 携带token 设置请求头 全局添加页面懒加载 拦截以4开头的状态码

响应时成功可以储存token  处理2和5开头的状态码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

 也可以封装一个get和post请求方法方便以后使用

//引入axios
import axios from './axios'
// 定义接口
interface typeObj {
    [key:string]:string|number
}
interface typeParams {
    url: string
    method?: string
    headers?: typeObj
    data?: typeObj
    params?: typeObj
}
// 给axios封装get方法和post方法
// 发送get请求
export const get = (params: typeParams) => {
    params.method = 'get'
    return axios(params)
}

// 发送post请求
export const post = (params: typeParams) => {
    params.method = 'post'
    return axios(params)
}
```

然后在请求接口的时候引入get 和post方法就可以使用了