认识axios
Posted 107w
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了认识axios相关的知识,希望对你有一定的参考价值。
认识axios
axios的基本使用
axios({
url: "http://123.207.32.32:8000/home/multidata"
}).then(res => {
console.log(res);
})
axios({
url: "http://123.207.32.32:8000/home/data",
params: {
type: \'pop\',
page: 1
}
}).then(res => {
console.log(res);
})
axios发送并发请求
使用axios.all,可以放入多个请求的数组,
axios.all([])返回的结果是一个数组,使用axios.spread可将数组[res1, res2]展开为res1, res2
axios.all([
axios({
url: "http://123.207.32.32:8000/home/multidata"
})
],
axios({
url: "http://123.207.32.32:8000/home/data",
params: {
type: \'pop\',
page: 1
}
})).then(results => {
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
axios.spread展开函数
axios.all([
axios({
url: "http://123.207.32.32:8000/home/multidata"
})
],
axios({
url: "http://123.207.32.32:8000/home/data",
params: {
type: \'pop\',
page: 1
}
})).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
全局配置
在开发中很多参数都是固定的,
这个时候我们可以进行一些抽取,利用axios的全局配置
axios.defaults.baseURL = "http://123.207.32.32:8000"
axios.defaults.timeout = 5000
axios.all([
axios({
url: "/home/multidata"
})
],
axios({
url: "/home/data",
params: {
type: \'pop\',
page: 1
}
})).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
配置选项注意事项:
methods: \'get\' -> params: {id: 12}
get请求只能传params,最后会把params里面的东西以?的形式拼接到url后面
methods: \'post\' -> data: {key: \'aa\'}(request body 请求体)
post请求把请求参数放在请求体里面
创建对应axios实例
(数据请求不同的IP地址,就不能用全局配置了)
const instance1 = axios.create({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
instance1({
url: \'/home/multidata\'
}).then(res => {
console.log(res);
})
instance1({
url: \'/home/data\',
params: {
type: \'pop\',
page: 1
}
}).then(res => {
console.log(res);
})
const instance2 = axios.create({
baseURL: \'http://222.111.33.33:8000\',
timeout: 10000,
// headers: {}
})
instance2({
url: \'...\',
})
对axios框架进行封装
万一有一天框架不维护了,可以只修改封装的文件,
如果不封装,在很多文件都引用框架,修改会超麻烦
专门创建一个文件夹network
方式一
request.js下的代码
import axios from \'axios\'
export function request(config, success, failure) {
//创建axios实例
const instance = axios.creat({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res => {
// console.log(res);
success(res)
})
.catch(err => {
// console.log(err);
failure(err)
})
}
main.js下的代码
import { request } from "./network/request"
request({
url: \'/home/multidata\'
}, res => {
console.log(res);
}, err => {
console.log(err);
}
)
方式二
request.js下的代码
import axios from \'axios\'
export function request(config) {
//创建axios实例
const instance = axios.create({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
//发送真正的网络请求
instance(config.baseConfig)
.then(res => {
// console.log(res);
config.success(res)
})
.catch(err => {
// console.log(err);
config.failure(err)
})
}
main.js下的代码
import { request } from "./network/request"
request({
baseConfig: {
url: "/home/multidata"
},
success: function (res) {
console.log(res);
},
failure: function (err) {
console.log(err);
}
})
方式三
request.js下的代码
import axios from \'axios\'
export function request(config) {
return new Promise((resolve, reject) => {
//创建axios实例
const instance = axios.create({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
//发送真正的网络请求
instance(config)
.then(res => {
resolve(res)
})
.catch(err => {
reject(err)
})
})
}
main.js下的代码
import { request } from "./network/request"
request({
url: "/home/multidata",
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
方式四
request.js下的代码
import axios from \'axios\'
export function request(config) {
//创建axios实例
const instance = axios.create({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
//发送真正的网络请求
return instance(config)
}
main.js下的代码
import { request } from "./network/request"
request({
url: "/home/multidata",
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios拦截器
axios提供了拦截器,用于我们在每次请求或得到响应后,进行对应的处理
request.js下的代码
import axios from \'axios\'
export function request(config) {
//1.创建axios实例
const instance = axios.create({
baseURL: \'http://123.207.32.32:8000\',
timeout: 5000
})
//2. axios拦截器
//2.1.请求拦截的作用
instance.interceptors.request.use(config => {
// console.log(config);
//1.比如config中的一些信息不符合服务器要求
//2.比如每次发送网络请求时,都希望在界面显示一个请求的图标
//3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config
}), err => {
console.log(err);
}
//2.2.响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data
},err => {
console.log(err);
})
//3.发送真正的网络请求
return instance(config)
}
main.js下的代码
import { request } from "./network/request"request({ url: "/home/multidata",}).then(res => { console.log(res);}).catch(err => { console.log(err);})
以上是关于认识axios的主要内容,如果未能解决你的问题,请参考以下文章