搭建Vue-TypeScript项目(二)

axios拦截器,请求以及tslint配置

配置tslint,也就是tslint.json

1.默认的tslint配置,官方文档

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [true, "single"]
  }
}

依次介绍

1.defaultSeverity?: "error" | "warning" | "off"：应用于此配置文件中的规则的严重性级别，以及任何其严重性设置为“default”的继承配置文件中的规则。如果未定义，则使用“error”作为defaultSeverity。(换句话说就是你配置的文件出错了,会以哪种方式提示你,报错?警告?)

2.extends?: string | string[]：内置配置预设的名称或通过此配置扩展的其他配置文件的路径或路径数组。(也就说配置一些默认的处理规则)
此处安装两个插件

npm i tslint-config-prettier tslint-plugin-prettier -D

使用

"extends": [
    "tslint:recommended",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ]

3.linterOptions?: { exclude?: string[] }：任何匹配这些的文件都不会被检测。(比如你发现一个好用的插件,不是ts写的,排除掉就可以愉快的玩耍了)

4.rules?: { [name: string]: RuleSetting }：规则名称到其配设置的映射。这些规则适用于.ts和.tsx文件。(配置规则)

全部规则在这 点我

1,已有规则

"rules": {
    #缩进,空格两个,我不习惯,喜欢tab建,所以我删掉了这个配置
    "indent": [true, "spaces", 2],
    #ts的命名空间,我使用了,也删除了
    "interface-name": false,
    #不允许有空白行
    "no-consecutive-blank-lines": false,
    #检查对象文字中键的排序
    "object-literal-sort-keys": false,
    #import 需要按字母排序,false吧
    "ordered-imports": false,
    #强制单引号,删了
    "quotemark": [true, "single"]
  }

2.我使用的规则

"rules": {
    #强制分号,我不需要,设置false
    "semicolon": false,
    #该使用const时使用const,嫌麻烦,false
    "prefer-const": false,
    #不准console.log,我要打印东西,false
    "no-console": false,
    #同上
    "object-literal-sort-keys": false,
    #同上
    "ordered-imports": false,
    #我要使用debugger啊,false
    "no-debugger": false,
    #类的成员必须要public和private,不想每个都这么干,设置了false
    "member-access": false
  }

贴上我的ts.json配置代码

{
  "defaultSeverity": "error",
  "linterOptions": {
    "exclude": ["node_modules/**/*", "./src/components/mobile-calendar/*"]
  },
  "extends": [
    "tslint:recommended",
    "tslint-config-prettier",
    "tslint-plugin-prettier"
  ],
  "jsRules": {},
  "rules": {
    "prettier": ["true", ".prettierrc"],
    "semicolon": false,
    "no-console": false,
    "prefer-const": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "no-angle-bracket-type-assertion": false,
    "member-access": false,
    "no-debugger":false
  },
  "rulesDirectory": []
}

配置axios拦截器及请求api

(1)src目录新建utils文件夹,新建config.ts,直接贴代码

import axios from 'axios';

import { formatData } from '@/utils/commom';

let Instance = axios.create({
  baseURL: '你们服务器的公共', // 公共url
  timeout: 12000 // 请求最长时间
});
#请求的,可以设置一些默认请求信息
Instance.interceptors.request.use(req => {
  return req;
});
#返回的信息,可以处理返回的数据
Instance.interceptors.response.use(
  resp => {
    return resp.data;
  },
  err => {
    // 可以在这处理渠全局接口错误
    console.log(err);
  }
);
#导出get请求,我喜欢async await方式,所以直接导出个方法
export async function get(url: string, data?: any) {
  let resultUrl = `${url}?${formatData(data)}`;
  let result = await Instance.get(resultUrl);
  return result;
}
#导出post请求,少写点代码
export async function post(url: string, data?: any) {
  let result = await Instance.post(url, data);
  return result;
}

export default Instance;

(2)新建api文件夹,新建user.ts,直接贴代码

import { get, post } from '@/utils/config';

export async function login(username: any, password: any) {
  let result = await post('/pc/login', {
    username,
    password
  });
  return result;
}

(3)使用接口

<template>
 组件
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

import { login } from "@/api/user";
@Component({
  components: {
    
  }
})
export default class Home extends Vue {
  async mounted() {
    let data = await login("用户名", '密码');
    console.log(data);
  }
}
</script>