推荐: — axios中文官方文档 —
-
什么是axios?
Axios是一个基于promise的HTTP库, 可以用在浏览器和node.js中 -
基本使用
安装
npm install axios
基本用例
import axios from 'axios'
// 默认get请求
axios('http://123.207.32.32:8000/user/12345')
// 执行Get请求
const url = 'http://123.207.32.32:8000/user?ID=12345'
axios.get('url').then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
// 上面get请求也可以这样做
axios.get('http://123.207.32.32:8000/user', {
params: {
ID: 12345
}
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
//执行post请求
axios.post('http://123.207.32.32:8000/user', {
firstName: 'Fired',
lastName: 'Flintstone'
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
//也可以这样
axios({
url: 'http://123.207.32.32:8000/user/12345',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
//axios.all(itemable),axios.spread(callback)执行多个并发请求
const getUserAccount = () => {
return axios.get('http://123.207.32.32:8000/user/12345')
}
const getUserPermissions = () => {
return axios.get('http://123.207.32.32:8000/user/permissions', {
params: {
ID: 12345
}
})
}
// axios.all([config1,config2]).then(axios.spread((res1,res2) => {}))
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((res1, res2) => {
console.log(res1)
console.log(res2)
}))
// axios.all() 可以同时进行多个并发请求
// axios.spread() 可以将多个返回进行拆分
- 创建实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000', //基本url,用于url重复部分
timeout: 1000, //请求超时设定,单位毫秒
})
instance('/home/multidata').then(res => {
console.log(res)
})
- 拦截器
在请求或相应被 then 或 catch 处理前拦截它们
// 请求拦截器
axios.interceptors.request.use(config => {
//在请求之前的处理
//处理完成后必须返回config
return config
}, err => {
// 请求错误时的处理
return Promise.reject(error)
})
//响应拦截器
axios.interceptors.request.use(response=> {
//对于相应返回的处理
return response
}, err => {
//响应错误时的处理
return Promise.reject(err)
})
- 封装request 模块
在真实的项目开发过程中,一般讲axios单独做为项目中一个模块
在src中新建utils文件夹,新建request.js文件
request.js
import axios from 'axios'
const request = config => {
//创建axios实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
});
//请求拦截器
instance.interceptors.request.use(config => {
console.log(config)
return config
}, err => {
console.log(err)
})
//响应拦截器
instance.interceptors.response.use(response => {
console.log(response)
return response
},err => {
console.log(err)
})
}
export default request
其他子文件request引用
import request from '@/utils/request'
const getUserAccount = (data) => {
let url = ''
for(let key in data){
if(data[key] != '' && data[key] != null){
url = url + '&' + key + '=' + encodeURIComponent(data[key])
}
}
return request.get(`/user/permissions?${url}`)
}
export getUserAccount