1.认识Axios库
Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中发送网络请求。
1.1 Axios的优点
XMLHttpRequest，fetch是高级一点的原生
原生的缺点：
1.需要自己来封装原生。
2.原生某些功能不具备，你需要自己来完成请求拦截，响应拦截等。
3.js可以跑在浏览器和node上面，但是原生的fetch是不能工作在node中，node需要使用别的api。比如http模块来发送请求。
使用axios的优点
1.已经帮我们把原生的底层逻辑都封装了。
2.还额外增加了拦截器等功能
3.适配浏览器和node。axios已经帮我们封装好了，在在浏览器中发送 XMLHttpRequests 请求，在 node.js 中发送 http请求。不用担心在不同的平台使用不同的api
1.2 功能特点
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
等等
1.3 安装axios
在项目中安装axios
npm install axios
2.发送常见的请求和配置
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
在main.js中
import {
createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
//1.发送request请求
axios
.request({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get'
})
.then((res) => {
console.log('res: ', res.data)
})
//request里面的参数中的method里面写get的话，就和axios.get一样了，method不写的话，默认是get
//2.发送get请求(带参数有两种写法，第二种用的比较多)
axios.get('http://123.207.32.32:9001/lyric?id=500665346').then((res) => {
console.log('res: ', res.data)
})
axios
.get('http://123.207.32.32:9001/lyric', {
params: {
id: 500665346
}
})
.then((res) => {
console.log('res: ', res.data)
})
//3.post 请求(2种方法)
axios
.post('http://123.207.32.32:1888/02_param/postjson', {
name: 'why',
age: 18,
height: 1.88
})
.then((res) => {
console.log('res: ', res.data)
})
//这种写法第二个 参数是data
//4.post请求方法二，直接把第二个参数当作config, 把data写道config里面
axios
.post('http://123.207.32.32:1888/02_param/postjson', {
data: {
name: 'why',
age: 18,
height: 1.88
}
})
.then((res) => {
console.log('res: ', res.data)
})
httpbin.org/get发送get 请求，httpbin.org/post发送post请求
用来做测试
3.常见的配置选项
3.1baseURL
import axios from 'axios'
const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
//发送多个请求，后面的地址是不一样的，baseURL可以解决这个问题
// 给axios实例配置公共的基础配置
const baseURL = 'http://123.207.32.32:8000'
axios.defaults.baseURL = baseURL
//也可以配置timeout
axios.defaults.timeout = 10000
//axios.defaults.headers = {}
//1.1 get:/home/multidata
//自动拼接，实际上是http://123.207.32.32:8000/home/multidata
axios.get('/home/multidata').then((res) => {
console.log('res: ', res.data)
})
3.2 axios.all
◼ 有时候, 我们可能需求同时发送两个请求
使用axios.all, 可以放入多个请求的数组.
希望数据都有请求之后再拿到数据
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2
// 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)
})
4.创建axios实例
◼ 为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例；
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样；
比如某些请求需要使用特定的baseURL或者timeout等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
直接这么使用，这里axios也是一个实例，是axios默认库提供给我们的实例，实际项目种不使用这个实例来发送请求，所有的请求都是一样的设置。
import axios from 'axios'
axios
.request({
url: 'http://123.207.32.32:8000/home/multidata',
method: 'get'
})
.then((res) => {
console.log('res: ', res.data)
})
// 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: {
}
})
5.请求和响应拦截器
◼ axios的也可以设置拦截器：拦截每次请求和响应
axios.interceptors.request.use(请求成功拦截, 请求失败拦截)
// fn1: 请求发送成功会执行的函数
// fn2: 请求发送失败会执行的函数
◼ axios.interceptors.response.use(响应成功拦截, 响应失败拦截)
// fn1: 数据响应成功(服务器正常的返回了数据 200或者200多，都是成功的状态)
//fn2：服务器响应400+或者500+的时候调用这个函数
//对实例配置拦截器
//两个参数，一个请求成功的回调拦截，一个是请求失败的回调拦截
axios.interceptors.request.use(
(config) => {
//config是发送请求时候的参数，并且用完之后要给人家返回出去
//用的时候可以做一些别的操作，比如改变config.url=XXX之类的，变换地址
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('响应成功的拦截')
return res
},
(err) => {
console.log('服务器响应失败')
return err
}
)
axios.interceptors.response.use(
(res) => {
////这个res是响应回来的数据
console.log('响应成功拦截')
// 1.结束loading的动画
// 2.对数据进行转化, 再返回数据
return res.data
},
(err) => {
console.log('服务器响应失败')
return err
}
)
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then((res) => {
console.log('res:', res)
})
6.axios请求库封装（简洁版）
在src文件夹里面创建service文件夹
与服务器沟通有关的文件放里面
创建index.js
import axios from "axios";
class HYRequest {
constructor(baseURL, timeout = 10000) {
this.instance = axios.create({
baseURL,
timeout,
});
}
request(config) {
return this.instance.request(config).then((res) => {
return res.data;
});
}
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");
main.js
import {
createApp } from "vue";
import axios from "axios";
import App from "./App.vue";
import hyRequest from "./service";
createApp(App).mount("#app");
hyRequest
.request({
url: "/lyric?id=500665346",
})
.then((res) => {
console.log("res:", res);
});
hyRequest
.get({
url: "/lyric",
params: {
id: 500665346,
},
})
.then((res) => {
console.log("res:", res);
});
