Axios
axios是一个网络请求相关的库。
axios: ajax i/o system
使用axios编写的网络请求代码，可以运行在浏览器端，也可以在Node环境中运行。
01. 支持的请求方式
-
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.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
02. 配置选项
- 请求地址
- url: '/user'
- 请求类型
- method: 'get'
- 请求根路径
- baseURL: 'http://www.mt.com/api'
- 自定义请求头
- headers:{'x-Requested-With':'XMLHttpRequest'},
- 携带参数
- params:
- request body
- data:
- 超时设置
- timeout: 1000
- 请求前数据处理
- transformRequest:[function(data){}],
- 请求后数据处理
- transformResponse: [function(data){}],
- 查询对象序列化函数
- paramsSerializer: function(params){}
03. 示例
基本使用
import axios from 'axios'
// 1.发送request请求(默认为get请求)
axios.request({
url: "http://123.207.32.32:8000/home/multidata",
method: "get"
}).then(res => {
console.log("res:", res.data)
})
// 2.发送get请求
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
console.log("res:", res.data.lrc)
})
// 3.发送get请求，携带参数
axios.get("http://123.207.32.32:9001/lyric", {
params: {
id: 500665346
}
}).then(res => {
console.log("res:", res.data.lrc)
})
// 4.发送post请求，直接传入参数
axios.post("http://123.207.32.32:1888/02_param/postjson", {
name: "coderwhy",
password: 123456
}).then(res => {
console.log("res", res.data)
})
// 5.发送post请求，定义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
import axios from 'axios'
// 1.baseURL
const baseURL = "http://123.207.32.32:8000"
// 给axios实例配置公共的基础配置
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}
// get: /home/multidata
axios.get("/home/multidata").then(res => {
console.log("res:", res.data)
})
一次性多个请求:
import axios from 'axios'
// 2.axios发送多个请求
// 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)
})
04. axios实例
导入语句 import axios from 'axios' ，导入的是一个实例。
可以直接使用这个实例发送网络请求，一般的开发、测试使用这个实例即可。
同时，这个实例有一个create的方法，可以创建新实例。
大项目的开发中，为了便于管理，一般都会针对场景创建对应的axios实例。
import axios from 'axios'
// 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: {}
})
05. 拦截器
import axios from '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)
})
06. 封装实例
对于像网络请求这种库，为了方便管理，也为了避免出现这个库一旦官方不更新、不维护，整个项目就得重新修改的情况，
我们往往会对这个库在进行封装。
import axios from 'axios'
class HYRequest {
constructor(baseURL, timeout=10000) {
this.instance = axios.create({
baseURL,
timeout
})
}
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")