Vue3——Axios（网络请求库）
文章目录
- 求一键三连
- 前言
- 认识axios
- 使用Axios
- 常见请求演示
-
- 配置选项
-
- baseURL+all
- 创建axios实例
- 请求拦截（掌握）
- 对axios的类的封装（掌握）
- 老师封装好的一个更完全的axios库
求一键三连
希望大家看完觉得有用的话点赞、关注和收藏，感谢！！！
前言
axios可以在浏览器和node里面用
原生的问题:无法在node里使用，fetch是在浏览器里使用的。(但是原生可以帮助我们理解。)
认识axios
使用Axios
1.安装axios
2.创建service文件夹并在里面创建index.js，import axios，然后创建封装axios的类并导出创建的axios实例对象
3.在main.js在导入封装好的对象即可使用
常见请求演示
get请求有两种写法，一个是直接拼接一个是写参数
pst请求是不可以拼接到url里的，
还有跨域的问题，这个可以好好了解一下
httpbin.org 走get请求测试
// 1.发送request请求
axios.request({
url: "http://123.207.32.32:8000/home/multidata",
method: "get"
}).then(res => {
console.log("res:", res.data)
//注意一般拿到数据是返回res.data,而不是返回一整个promise对象
})
// 2.发送get请求 直接拼接
axios.get('your_url')
.then(response => {
const data = response.data;
console.log(data);
//这样就可以拿到promise里的数据，都要做这样的一个处理，否则是一个promise对象。
})
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
console.log("res:", res.data.lrc)
})
// get请求 写参数
axios.get("http://123.207.32.32:9001/lyric", {
params: {
id: 500665346
}
}).then(res => {
console.log("res:", res.data.lrc)
})
// 3.发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {
name: "coderwhy",
password: 123456
}).then(res => {
console.log("res", res.data)
})
// data格式
axios.post("http://123.207.32.32:1888/02_param/postjson", {
data: {
name: "coderwhy",
password: 123456
}
}).then(res => {
console.log("res", res.data)
})
配置选项
baseURL+all
// 1.baseURL,很有用，因为大部分前面都是一样的
const baseURL = "http://123.207.32.32:8000"
// 给axios实例配置公共的基础配置 要在这里配置后才可以使用
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}
// 1.1.get: /home/multidata
axios.get("/home/multidata").then(res => {
console.log("res:", res.data)
})
// 1.2.get: /home/data
// 2.axios发送多个请求
// axios.all:发送多个请求 内部是封装了一下 Promise.all而已
axios.all([
axios.get("/home/multidata"),
axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
console.log("res:", res) //这里返回的也是多个请求的结果
})
创建axios实例
创建自己的axios实例
不会用默认的，为每一个url创建一个实例，不同的url对应不同的实例
取决于项目，可能会从多个服务器拿数据，这样有多个实例就更方便
// axios默认库提供给我们的实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")
// 创建其他的实例发送网络请求
const instance1 = axios.create({
baseURL: "http://123.207.32.32:9001",
timeout: 6000,
headers: {}
})
//创建实例之后就用实例来进行操作
instance1.get("/lyric", {
params: {
id: 500665346
}
}).then(res => {
console.log("res:", res.data)
})
const instance2 = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 10000,
headers: {}
})
后面可以在封装的Axios类方法里创建多个实例传出去。
请求拦截（掌握）
基本上都会进行拦截，可以对请求做一些处理，比如
可以在拦截之后做一些配置
拦截后操作：
// 对实例配置拦截器
axios.interceptors.request.use((config) => {
console.log("请求成功的拦截")
// 1.开始loading的动画
// 2.对原来的配置进行一些修改
// 2.1. header
// 2.2. 认证登录: token/cookie
// 2.3. 请求参数进行某些转化
return config
}, (err) => {
console.log("请求失败的拦截")
return err
})
axios.interceptors.response.use((res) => {
console.log("响应成功的拦截")
// 1.结束loading的动画
// 2.对数据进行转化, 再返回数据
return res.data
}, (err) => {
console.log("响应失败的拦截:", err)
return err
})
axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {
console.log("res:", res)
}).catch(err => {
console.log("err:", err)
})
对axios的类的封装（掌握）
用别人的库是有风险的，万一这个库不能用了，项目就会出问题，而且耦合度就太高了，修改很麻烦
解决办法，对库多封装一层，这样替换这个库的时候就直接在这个封装这里修改就好了，这样就不用全都一个个的修改，这个概念也很简单，这就是封装的好处。
这个思想真的很重要，但是这一步在项目里面就很重要，是很重要的一个思想
这个东西就很好，只有吃过亏才知道，所以这也是听课的好处，不然自己摸索不知道摸索多久
在src里面创建service的文件，用来放封装
axios请求库封装
封装源码：
import axios from 'axios'
class HYRequest {
constructor(baseURL, timeout=10000) {
this.instance = axios.create({
baseURL,
timeout
})
}
//使用this来指向当前创建的实例对象
request(config) {
return new Promise((resolve, reject) => {
this.instance.request(config).then(res => {
resolve(res.data)
}).catch(err => {
reject(err)
})
})
}
get(config) {
return this.request({ ...config, method: "get" })
}
post(config) {
return this.request({ ...config, method: "post" })
}
//后面也可以在这里创建更多的方法，方式是差不多的
}
export default new HYRequest("http://123.207.32.32:9001")
//这里导出的是一个实例对象，然后你也可以创建多个实例对象导出去，这个就是比较简单了
老师封装好的一个更完全的axios库
使用于TS
在项目中用ts封装axios，一次封装整个团队受益
import axios, { AxiosResponse } from 'axios'
import type { AxiosInstance, AxiosRequestConfig } from 'axios'
import type {
RequestConfig,
RequestInterceptors,
CancelRequestSource,
} from './types'
class Request {
// axios 实例
instance: AxiosInstance
// 拦截器对象
interceptorsObj?: RequestInterceptors<AxiosResponse>
/*
存放取消方法的集合
* 在创建请求后将取消请求方法 push 到该集合中
* 封装一个方法，可以取消请求，传入 url: string|string[]
* 在请求之前判断同一URL是否存在，如果存在就取消请求
*/
cancelRequestSourceList?: CancelRequestSource[]
/*
存放所有请求URL的集合
* 请求之前需要将url push到该集合中
* 请求完毕后将url从集合中删除
* 添加在发送请求之前完成，删除在响应之后删除
*/
requestUrlList?: string[]
constructor(config: RequestConfig) {
this.requestUrlList = []
this.cancelRequestSourceList = []
this.instance = axios.create(config)
this.interceptorsObj = config.interceptors
// 拦截器执行顺序 接口请求 -> 实例请求 -> 全局请求 -> 实例响应 -> 全局响应 -> 接口响应
this.instance.interceptors.request.use(
(res: AxiosRequestConfig) => res,
(err: any) => err,
)
// 使用实例拦截器
this.instance.interceptors.request.use(
this.interceptorsObj?.requestInterceptors,
this.interceptorsObj?.requestInterceptorsCatch,
)
this.instance.interceptors.response.use(
this.interceptorsObj?.responseInterceptors,
this.interceptorsObj?.responseInterceptorsCatch,
)
// 全局响应拦截器保证最后执行
this.instance.interceptors.response.use(
// 因为我们接口的数据都在res.data下，所以我们直接返回res.data
(res: AxiosResponse) => {
return res.data
},
(err: any) => err,
)
}
/**
* @description: 获取指定 url 在 cancelRequestSourceList 中的索引
* @param {string} url
* @returns {number} 索引位置
*/
private getSourceIndex(url: string): number {
return this.cancelRequestSourceList?.findIndex(
(item: CancelRequestSource) => {
return Object.keys(item)[0] === url
},
) as number
}
/**
* @description: 删除 requestUrlList 和 cancelRequestSourceList
* @param {string} url
* @returns {*}
*/
private delUrl(url: string) {
const urlIndex = this.requestUrlList?.findIndex(u => u === url)
const sourceIndex = this.getSourceIndex(url)
// 删除url和cancel方法
urlIndex !== -1 && this.requestUrlList?.splice(urlIndex as number, 1)
sourceIndex !== -1 &&
this.cancelRequestSourceList?.splice(sourceIndex as number, 1)
}
request<T>(config: RequestConfig<T>): Promise<T> {
return new Promise((resolve, reject) => {
// 如果我们为单个请求设置拦截器，这里使用单个请求的拦截器
if (config.interceptors?.requestInterceptors) {
config = config.interceptors.requestInterceptors(config)
}
const url = config.url
// url存在保存取消请求方法和当前请求url
if (url) {
this.requestUrlList?.push(url)
// TODO 在axios0.22起，对CancelToken已经弃用，需要改成 AbortController 文档：https://axios-http.com/docs/cancellation
config.cancelToken = new axios.CancelToken(c => {
this.cancelRequestSourceList?.push({
[url]: c,
})
})
}
this.instance
.request<any, T>(config)
.then(res => {
// 如果我们为单个响应设置拦截器，这里使用单个响应的拦截器
if (config.interceptors?.responseInterceptors) {
res = config.interceptors.responseInterceptors(res)
}
resolve(res)
})
.catch((err: any) => {
reject(err)
})
.finally(() => {
url && this.delUrl(url)
})
})
}
// 取消请求
cancelRequest(url: string | string[]) {
if (typeof url === 'string') {
// 取消单个请求
const sourceIndex = this.getSourceIndex(url)
sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][url]()
} else {
// 存在多个需要取消请求的地址
url.forEach(u => {
const sourceIndex = this.getSourceIndex(u)
sourceIndex >= 0 && this.cancelRequestSourceList?.[sourceIndex][u]()
})
}
}
// 取消全部请求
cancelAllRequest() {
this.cancelRequestSourceList?.forEach(source => {
const key = Object.keys(source)[0]
source[key]()
})
}
}
export default Request
export { RequestConfig, RequestInterceptors }