前言:实际项目开发中,向后台发请求,vue相关项目,都是用axios,不会用ajax,不会为了ajax单独去引入jquery.
axios官网:http://www.axios-js.com/
第一步:下载依赖axios
npm i axios --save
或者
cnpm i axios --save
或者
yarn add axios --save
第二步:在src的目录中新建一个utils的文件夹
第三步:request.ts中编写代码
import axios, { AxiosInstance } from "axios";
// 因为是ts需要定义类型
import qs from "qs";
class AxiosUtils {
private http: AxiosInstance;
constructor() {
this.http = axios.create({
// 根路径
baseURL: "http://119.23.246.178:80",
// 请求延迟时间 如果超过这个时间就会断开拦截
timeout: 3000,
// headers: { "X-Custom-Header": "foobar" },
});
// 要在constructor里面进行调用 发请求的时候就要开始调用 就要对请求和响应进行拦截
this.myAddinterceptors();
}
// 拦截器
// 拦截器要自己定义一个方法.实现拦截
private myAddinterceptors() {
//封装的是拦截器
//请求拦截器
// 一般的作用是 拦截token或者请求头
// 添加请求拦截器
this.http.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
this.http.interceptors.response.use(
function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
//对返回的数据进行筛选
//response.data 只取data中的值,其他的属性不要
return response.data;
},
function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
}
);
}
// 封装一个request方法
private request(url: string, method: string, data: any = {}) {
return this.http({
url,
method,
params: method == "get" ? data : "",
data: method == "post" ? qs.stringify(data) : "",
});
}
// public公开的,意思就是让别人用 private自己封装的 需要隐藏起来 不让别人用
// 封装get方法
public get(url: string, data: any) {
return this.request(url, "get", data);
}
// 封装post方法
public post(url: string, data: any) {
return this.request(url, "post", data);
}
}
// 新建对象
let http = new AxiosUtils();
// 把对象暴露出去
export default http;
理解为什么在constructor中进行调用:
第四步:在src目录下新建api文件夹,创建模块ts文件
在模块文件中编辑代码片段:
import request from "../utils/request";
export const api_login = (data: any) => {
return request.post("/users/checkLogin", data);
};
本地存储localStorage和sessionStorage的方法封装
//定义本地存储的接口类
export interface LocalInterFace {
// 获取
get<T>(key: string): T;
// 设置
set<T>(key: string, value: T): void;
// 移除
remove(key: string): void;
// 判断是否存在
isKey(key: string): boolean;
// 清除
clear(): void;
}
// 定义localStorage封装
class LocalUtil implements LocalInterFace {
// 获取
get<T>(key: string): T | any {
// ts类型推断时不能将null赋值给JSON.parse()的参数
let str = window.localStorage.getItem(key) || "";
if (str) {
return JSON.parse(str);
}
return str;
}
// 设置
set<T>(key: string, value: T): void {
window.localStorage.setItem(key, JSON.stringify(value));
}
// 移除
remove(key: string): void {
window.localStorage.removeItem(key);
}
// 判断是否存在
isKey(key: string): boolean {
let str = window.localStorage.getItem(key);
return str ? true : false;
}
// 清除
clear(): void {
window.localStorage.clear();
}
}
// 定义sessionStorage封装
class SessionUtil implements LocalInterFace {
// 获取
get<T>(key: string): T | any {
// ts类型推断时不能将null赋值给JSON.parse()的参数
let str = window.sessionStorage.getItem(key) || "";
if (str) {
return JSON.parse(str);
}
return str;
}
// 设置
set<T>(key: string, value: T): void {
window.sessionStorage.setItem(key, JSON.stringify(value));
}
// 移除
remove(key: string): void {
window.sessionStorage.removeItem(key);
}
// 判断是否存在
isKey(key: string): boolean {
let str = window.sessionStorage.getItem(key);
return str ? true : false;
}
// 清除
clear(): void {
window.sessionStorage.clear();
}
}
// 创建需要导出的对象
const $local = new LocalUtil();
const $session = new SessionUtil();
// 以对象的形式导出
export { $local, $session };