使用ts对数据类型限制和封装axios

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情

ts对数据类型限制

给vue的data增加类型限制，定义一个interface,但是一般都会新建一个文件夹，src/types/login.ts,首先定义一个IUserForm,然后定义一个类，loginData，里面有个属性userForm

export interface IUserForm {
    username: string;
    password: string;
}
export class LoginData {
    userForm: IUserForm = {
        username: '',
        password: ''
    }
}

在login.vue里面，import { LoginData } from "@/type/login";因为定义的是一个类，在使用时直接实例化一下就能得到一个有类型约束的对象，把原来的{userForm:{username:'',password:''}}换成 new loginData()

    const data = reactive(new LoginData());

封装axios

先安装axios

npm install axios -S

新建一个文件 src/request/index.ts 然后从里面导入axios ,使用axios.create方法创建实例，

需要先在fastmock官网注册一个账号，然后增加一些接口,此处具体方法忽略

然后使用请求拦截方法，首先先判断header是不是有，没有header的话先赋值一个空的对象，这样后面为headers属性赋值时就不会报错了，然后从本地localStorage中获取token,如果获取不到，就默认给一个空字符串，接着给config.headers赋值一个token属性，大概意思就是说，如果有token,那么就把token放在请求头里，如果没有token就什么都不做，是否登录由后端鉴权，如果我传token了，后端就验证token是否有效，如果有效，就把数据返回给我，如果没传token，那后端就拒绝我的请求。

在响应拦截器中。判断一下状态码是不是200，如果不是就reject响应，如果是200，就把响应的data返回前端处理，此处主要是统一处理响应非200的错误。

import axios from 'axios'
const service = axios.create(
    {
        baseURL: 'https://www.fastmock.site/mock/d6e3dbe893b08dca9a9dbfe4759d0ac8/api',
        timeout: 50000,
        headers: {
            "Content-type": "application/json;charset=utf-8"
        }
    }
)
service.interceptors.request.use(config => {
    config.headers = config.headers || {};
    const token = localStorage.getItem('token') || '';
    config.headers.token = token;
    return config
})

service.interceptors.response.use(res => {
    const code = res.data.code;
    if (code != 200) {
        return Promise.reject(res.data)
    }
    return res.data

}, err => {
    console.log(err)
})
export default service;