文章目录
- 前言
- 一、axios请求的封装(TS版)
-
- 1.JwtService
- 2.ApiService
- 3.使用
- 4.axios配置详解
-
- 4.1 url(必写)
- 4.2 method
- 4.3 baseURL(常用)
- 4.4 transformRequest
- 4.5 transformResponse
- 4.6 headers(常用,如设置请求头json类型)
- 4.7 params(常用,只有get请求设置params,其他请求需设置params,即只有get的请求参数位于url后,其他请求参数都在请求体中)
- 4.8 data(常用)
- 4.9 timeout(常用)
- 4.10 withCredentials
- 4.11 onUploadProgress
- 4.12 onDownloadProgress
- 4.13 maxContentLength
前言
1.axios介绍
Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.js http模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
功能特点:
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
支持多种请求方式:
- axios(config)
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
- axios.all([]):返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
合并请求示例:
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// Both requests are now complete
}));
axios官方文档:http://www.axios-js.com/zh-cn/docs/
2.vue-axios介绍
vue-axios可以直接把axios挂在到vue上防止全局污染
vue-axios官方文档:http://www.axios-js.com/zh-cn/docs/vue-axios.html
一、axios请求的封装(TS版)
1.JwtService
const ID_TOKEN_KEY = "id_token" as string;
/**
* @description 从localStorage获取令牌
*/
export const getToken = (): string | null => {
return window.localStorage.getItem(ID_TOKEN_KEY);
};
/**
* @description 将令牌保存到本地存储
* @param token: 令牌
*/
export const saveToken = (token: string): void => {
window.localStorage.setItem(ID_TOKEN_KEY, token);
};
/**
* @description 从本地存储中删除令牌
*/
export const destroyToken = (): void => {
window.localStorage.removeItem(ID_TOKEN_KEY);
};
export default {
getToken, saveToken, destroyToken };
2.ApiService
import {
App } from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import JwtService from "@/core/services/JwtService";
import {
AxiosResponse, AxiosRequestConfig } from "axios";
/**
* @description 通过Axios调用HTTP请求的服务
*/
class ApiService {
/**
* @description 共享vue实例的属性
*/
public static vueInstance: App;
/**
* @description 初始化 vue axios
*/
public static init(app: App<Element>) {
//共享vue实例属性
ApiService.vueInstance = app;
//vue挂载axio
ApiService.vueInstance.use(VueAxios, axios);
//vue设置基础路径
ApiService.vueInstance.axios.defaults.baseURL = "http://localhost";
}
/**
* @description 设置默认HTTP请求标头
*/
public static setHeader(): void {
ApiService.vueInstance.axios.defaults.headers.common[
"Authorization"
] = `Token ${
JwtService.getToken()}`;
}
/**
* @description 发送GET HTTP请求
* @param resource: string 路径
* @param params: AxiosRequestConfig 参数
* @returns Promise<AxiosResponse> 异步请求
*/
public static query(
resource: string,
params: AxiosRequestConfig
): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.get(resource, params).catch(error => {
throw new Error(`[KT] ApiService ${
error}`);
});
}
/**
* @description 发送GET HTTP请求
* @param resource: string 路径
* @param slug: string resful 参数
* @returns Promise<AxiosResponse> 异步请求
*/
public static get(
resource: string,
slug = "" as string
): Promise<AxiosResponse> {
return ApiService.vueInstance.axios
.get(`${
resource}/${
slug}`)
.catch(error => {
throw new Error(`[KT] ApiService ${
error}`);
});
}
/**
* @description 发送POST HTTP请求
* @param resource: string 路径
* @param params: AxiosRequestConfig resful参数
* @returns Promise<AxiosResponse> 异步请求
*/
public static post(
resource: string,
params: AxiosRequestConfig
): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.post(`${
resource}`, params);
}
/**
* @description 发送UPDATE HTTP请求
* @param resource: string 路径
* @param slug: string resful参数
* @param params: AxiosRequestConfig 参数
* @returns Promise<AxiosResponse>
*/
public static update(
resource: string,
slug: string,
params: AxiosRequestConfig
): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.put(`${
resource}/${
slug}`, params);
}
/**
* @description 发送PUT HTTP请求
* @param resource: string 路径
* @param params: AxiosRequestConfig 参数
* @returns Promise<AxiosResponse>
*/
public static put(
resource: string,
params: AxiosRequestConfig
): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.put(`${
resource}`, params);
}
/**
* @description 发送DELETE HTTP请求
* @param resource: string 路径
* @returns Promise<AxiosResponse>
*/
public static delete(resource: string): Promise<AxiosResponse> {
return ApiService.vueInstance.axios.delete(resource).catch(error => {
throw new Error(`[RWV] ApiService ${
error}`);
});
}
}
export default ApiService;
3.使用
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
4.axios配置详解
示例:
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
4.1 url(必写)
请求地址
扫描二维码关注公众号,回复:
14223144 查看本文章
4.2 method
请求方法,默认是get
4.3 baseURL(常用)
baseURL会添加到url前(url是绝对地址除外)。
4.4 transformRequest
transformRequest选项允许我们在请求发送到服务器之前对请求的数据做出一些改动
该选项只适用于以下请求方式:put/post/patch
4.5 transformResponse
transformResponse选项允许我们在数据传送到then/catch方法之前对数据进行改动
4.6 headers(常用,如设置请求头json类型)
自定义请求头信息
4.7 params(常用,只有get请求设置params,其他请求需设置params,即只有get的请求参数位于url后,其他请求参数都在请求体中)
params选项是要随请求一起发送的请求参数----一般链接在URL后面
4.8 data(常用)
data选项是作为一个请求体而需要被发送的数据,该选项只适用于方法:put/post/patch
在浏览器上data只能是FormData, File, Blob格式
4.9 timeout(常用)
超时时间
4.10 withCredentials
withCredentails选项表明了是否是跨域请求、默认是default
4.11 onUploadProgress
onUploadProgress上传进度事件
4.12 onDownloadProgress
下载进度的事件
4.13 maxContentLength
相应内容的最大值