(axios)axios-1
程序员文章站
2022-08-15 19:32:27
最简单的axios用法main.jsimport axios from 'axios'axios({ url:'http://xxxx'}).then(res => { console.log(res);})axios发送并发请求使用axios.all()可以放个多个请求的数组axios.all([])返回的结果是一个数组,使用axios.spread()可以将数组展开axios.all([axios({ url:'xxx'}),axios({ url:'...
最简单的axios用法
main.js
import axios from 'axios'
axios({
url:'http://xxxx'
}).then(res => {
console.log(res);
})
axios发送并发请求
- 使用axios.all()可以放个多个请求的数组
- axios.all([])返回的结果是一个数组,使用axios.spread()可以将数组展开
axios.all([axios({
url:'xxx'
}),axios({
url:'yyy',
params: {
type:'sell',
page:5
}
})])
.then(res => {
console.log(res);
})
axios.spread()
axios.all([axios({
url:'http://xxx'
}),axios({
url:'http://yyy',
params: {
type:'sell',
page:5
}
})])
.then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
全局配置
在上面的示例中,我们的BaseURL是固定的。
- 事实上在开发中可能很多参数都是固定的。
- 可以进行抽取,也可以利用axios的全局配置。
axios.defaults.baseURL = '123.200....'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
eg:这样同样能拿到结果
axios.defaults.baseURL = 'http://xxx'
axios({
url:'/home/multidata'
//更多配置选项
}).then(res => {
console.log(res);
})
常见的配置选项:https://github.com/axios/axios : Request Config
请求地址 | url: ‘/user’ |
请求类型 | method: ‘get’ |
请求路径 | baseURL: ‘https://some-domain.com/api/’ |
请求前的数据处理 | transformRequest: [function (data){}] |
请求后的数据处理 | transformResponse: [function (data){}], |
自定义请求头 | headers: {‘X-Requested-With’: ‘XMLHttpRequest’} |
URL查询对象 | params:{} |
延时 | timeout: 1000 |
跨域是否带token | withCredentials: false |
…
注意post请求要把参数放到请求体data里,get不用
axios的实例
- 当我们从axios模块中导入对象时使用的实例是默认的实例
- 当给该实例设置一些默认配置时,这些配置就被固定下来了
- 但是后续开发中,某些配置可能会不太一样:比如另一个页面的服务器地址完全不同
- 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等
- 这个时候就可以创建新的实例,并且传入属于该实例的配置信息
为了应对不在同一个ip地址 创建对于的axios的实例
const instance1 = axios.create({
baseURL:'http://xxx',
})
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:'...',
})
封装网络代码
request.js
//导出的形式使用函数 方便调用
import axios from 'axios'
export function request(config) {
//1.创建实例
const instance1 = axios.create({
baseURL:'http://152.136.185.210:8000/api/n3'
})
//发送真正的网络请求
return instance1(config) //本身返回promise 直接return
}
使用
import {request} from './network/request'
request({
url:'/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
拦截器
axios提供了拦截器,用于我们在发送每次请求或者得到响应后进行对应的处理。
四种:请求成功/失败、响应成功/失败
请求拦截:
//导出的形式使用函数 方便调用
import axios from 'axios'
export function request(config) {
//1.创建实例
const instance1 = axios.create({
baseURL:'http://152.136.185.210:8000/api/n3'
})
//2.拦截器 axios.interceptors是全局 这里使用局部
instance1.interceptors.request.use(a => {
// console.log(a); //打印的都是配置信息
//比如每次发送网络请求 都希望显示请求图标
//比如加上header
//某些网络请求(登录)必须携带一些特殊信息 如token 如果没有就跳转页面让用户先登录
return a; //必须返回 不然会请求失败
},err => {
console.log(err);
})
//3.发送真正的网络请求
return instance1(config) //本身返回promise 直接return
}
响应拦截:
instance1.interceptors.response.use(res => {
return res.data
},err => {
console.log(err);
})
本文地址:https://blog.csdn.net/qq_36663526/article/details/107566053
下一篇: 历史上的北元是什么 这是一个什么样的政权