vue2版本+TS(typescript)+封装api

vue+TS(typescript)+封装api

1、在src下新建一个 utli文件夹 文件夹下新建一个request.ts文件，在此文件里写如如下代码

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios"
//创建axsio 赋给常量service
 const service:AxiosInstance = axios.create({
   baseURL:'',
   timeout:100000
 });
// 添加请求拦截器
service.interceptors.request.use(function(config:AxiosRequestConfig):AxiosRequestConfig {//config是请求时的配置信息。
  // 在发送请求之前做些什么
  // 设置请求头 携带token
  const token:string | null = localStorage.getItem('token')
  if(token){
    config.headers = config.headers || {}
    config.headers['XXXX'] = token
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response:AxiosResponse):AxiosResponse {//response参数是响应对象
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});
export default service

2、在src下新建一个api文件夹 在api文件夹下新建一个ts文件

import request from '../utli/request'

export const loginApi =(data:{passworld:string,username:string}):Promise => request.post('/login',data)

3、在页面中写代码发请求

ps: 上面代码中用到了一个Ajax.AjaxRsp
此处用到了命名空间
（1）在项目中找到shims-vue.d.ts文件 加上如下代码

  declare global{
    namespace Ajax{
      interface AjaxRsp{
        errno:number,
        errmsg:string,
        data:any
      }
    }
  }

如图：

不用导出 在任何地方就可以使用了