一、为什么选择axios
?
?
?
二、axios的基本使用
// 1.axios基本使用
axios({
url: "http://123.207.32.32:8000/home/multidata",
method: 'get' //默认是get请求
}).then(res=>{
console.log(res);
})
// axios.post()
axios({
// url: "http://123.207.32.32:8000/home/data?type=sell&page=1",
url: "http://123.207.32.32:8000/home/data",
params: {
type: "sell",
page: 1
},
method: 'get' //默认是get请求
}).then(res=>{
console.log(res);
})三、axios发送并发请求
// 2.axios 并发请求。
console.log("axios并发请求")
axios.all([axios({
url: "http://123.207.32.32:8000/home/multidata",
method: 'get' //默认是get请求
}),axios({
url: "http://123.207.32.32:8000/home/data",
params: {
type: "sell",
page: 1
},
})])
.then(results=>{
console.log(results);
})
// .then(axios.spread((res1,res2)=>{
// console.log(res1);
// console.log(res2);
// }))?四、配置
// 3.使用全局axios和对应的配置进行网络请求
console.log("全局配置")
axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 5000
axios.all([axios({
url: "/home/multidata",
method: 'get' //默认是get请求
}),axios({
url: "/home/data",
params: {
type: "sell",
page: 1
},
})])
.then(results=>{
console.log(results);
})?五、创建对应的实例
在开发项目时，为了不给服务器压力，可能home、category等不在一个服务器上，此时，就不能使用全局配置了。因此，可以给每个服务器创建对应的实例。
// 4.创建对应的axios实例
console.log("创建对应的实例")
const instancel1 = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
instancel1({
url: "/home/multidata",
method: 'get' //默认是get请求
}).then(res=>{
console.log(res);
})
instancel1({
url: "/home/data",
params: {
type: "sell",
page: 1
},
}).then(res=>{
console.log(res);
})六、进行封装
由于在项目开发时，框架更新换代很快，如果某个框架不再更新，通常需要换一个新的框架。如果该框架在每个页面都引用了，那么对于后续的修改是很不友好的。因此，通常使用框架时，会对其进行封装。封装后再调用。
axios使用时，并不是在每个页面中都单独引入axios框架，单独发起网络请求，而是对其进行封装。在src中，创建network文件夹，创建request.js
import axios from "axios";
export function request(config){
const instance1 = axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
instance1(config)
.then(res=>{
console.log(res);
})
.catch(err => {
console.log(err);
})
// 在调用网络请求以后，需要把 数据发送出去：四种方式：
// 1.request函数传递的时候，传递一个config，再传入一个sucess和failer函数。
instance1(config)
.then(res=>{
sucess(res);
})
.catch(err => {
failer(err);
})
// 2.传递一个config，该config中包括baseConfig和sucess和failer函数
instance1(config.baseConfig)
.then(res=>{
config.sucess(res);
})
.catch(err => {
config.failer(err);
})
// 3.使用promise函数。
return new Promise((resolve, reject) => {
instance1(config)
.then(res=>{
resolve(res);
})
.catch(err => {
reject(err);
})
})
// 4. 由于instance1()本身就返回一个promise函数。因此直接return即可。
return instance1(config)
// 使用方式3和4，调用如下：
request(config)
.then(res=>{
// 处理代码
})
.catch(err => {
// 处理代码
})
}七、axios拦截器
// 1拦截器
// axios.interceptors 全局；拦截器
//对于axios实例的拦截
// 1.1 请求拦截
instance1.interceptors.request.use(config => {
console.log(config);
// (1):比如config中的一些信息不符合服务器的要求，因此可以增加一些配置，或者删除一些配置。
// （2）：比如每次发送网络请求时，希望在界面中显示一个请求的图标。
// （3）某些网络请求（比如登录，必须要携带token），必须携带一些错误信息。
return config //比如返回，否则会执行调用时的catch方法
}, err => {
console.log(err)
})
// 1.2 响应拦截
instance1.interceptors.response.use(res => {
console.log(res);
return res.data //拦截后，必须把数据返回出去，否则会输出undefined
}, err => {
return err
})
