Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
1. axios基本使用
安装
当前文件夹下npm install axios --save
文件中导入并使用
在需要网络请求的入口文件中
import axios from 'axios'
就可以直接使用axios(config),config一般为对象
axios({
url:'xxx'
}).then(res =>{
console.log(res); //axios支持promise的API
})
默认采用get请求,可以设置为post请求
axios({
url:'xxx',
method: "post"
}).then(res =>{
console.log(res);
})
其他请求方式有
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]])
请求参数params
axios({
url: 'http://123.207.32.32:8000/home/multidata',
//请求参数
params: {
type: 'pop',
page: 1
}
}).then(res =>{
console.log(res);
})
请求参数会拼接到url后面形成需要的请求地址
2. axios并发请求
有时候需要同时发送多个请求,采用axios.all([])
//axios.all([axios({}),axios({})])
axios.all([axios({
url: 'xxx'
}).axios({
url: 'zzz'
})])
.then(res =>{
console.log(res);
})
返回的res是一个对象数组,可在then方法中用axios.spread
将数组分割
axios.all([axios({
url: 'xxx'
}).axios({
url: 'zzz'
})])
.then(axios.spread(res1,res2) =>{
console.log(res1);
console.log(res2);
})
3. axios全局配置
实际开发中有些参数在一些请求中均有使用,可以在入口文件中配置这些公共参数,这样文件中请求都能使用,用axios的defaults属性
axios.defaults.baseURL = 'xxx'
axios.defaults.timeout = 5000
4. axios实例
- 当我们从axios模块中导入对象时, 使用的实例是默认的实例,当给该实例设置一些默认配置时, 这些配置就被固定下来了
- 但是后续开发中, 某些配置可能会不太一样,比如某些请求需要使用特定的baseURL或者timeout等,可以创建新的实例, 并且传入属于该实例的配置
//创建axios实例instance1,可以增加需要的配置
const instance1 = axios.create({
baseURL: 'xxx',
timeout: 5000
})
//实例instance1发送网络请求
instance1({
url: 'yyy',
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
})
5. axios网络请求封装
如果多个组件都需要网络请求,在每个组件文件中进行axios导入请求不太现实。
可以单独创建一个axios文件用于网络请求,这个文件中写了一个用于网络请求的函数request,需要的网络请求的组件就可以import这个函数
方法一
其他文件需要网络请求时,先导入这个函数,然后调用这个函数
//在其他文件中,调用request函数
import request from './network/request'
//其中第一个参数对象=config参数,第二个参数函数=success参数,第三个参数函数=failure函数
request({
url: 'xxx'
},res => {
console.log(res);
},err => {
console.log(err);
})
方法二:加入promise
//在其他文件中,调用request函数
import request from './network/request'
request({url: 'xxx'}) //这个request函数调用后返回一个promise对象,创建后立即执行promise的异步操作(创建axios实例与网络请求)
.then(res => {console.log(res); })//网络请求成功调用axios实例的then方法,then方法又调用外层promise的resolve方法,从而触发promise的then方法
.catch(err => {console.log(err); })
方法三:终极方法
方法二其实是两个promise套在一起了(禁止套娃),axios本身就是一个promise对象,不用return promise,直接return axios实例
import axios from 'axios'
export function request(config){
//1.创建axios实例,不要用全局
const instance = axios.create({
baseURL = "xxx",
//baseURL = "xxx"
timeout: 5000
})
return instance(config)
}
//在其他文件中,调用request函数
import request from './network/request'
request({url: 'xxx'}) //这个request函数调用后返回一个axios实例,他就能用promise的api
.then(res => {console.log(res); })
.catch(err => {console.log(err); })
axios的拦截器
一般写到封装的axios文件中
- 请求(成功/失败)
instance.interceptors.request;
- 响应(成功/失败)
instance.interceptors.response;
//请求拦截器
instance.interceptors.request.use(config => {
console.log(config);
return config; //要返回拦截的请求内容不然后续网络请求就失败了
},err => {
console.log(err);
});
//响应拦截器
instance.interceptors.response.use(result => {
console.log(result);
return result.data //一般result中的data有用
},err => {
console.log(err);
});