安装与使用
安装：
npm install --save axios
使用：
import axios from 'axios'
一、请求类型
get、delete方式类似都可以用params请求，delete可以在请求体中请求，post、put、patch类似都是使用请求体请求并且可以有json/form-data两种方式
GET
get请求的两种写法 (使用config 将参数放在params中)
axios.get('/url', {
params: {
id: 12
}
}).then((res) => {
console.log(res)
})
//另外一种写法
axios({
method: 'get',
url: '/url',
params: {
id: 12
}
}).then(res => {
console.log(res)
})
POST
post请求 (将参数放在请求体中)，两种方式json/form-data
// applicition/json
let data = {
id: 12
}
axios.post('/url', data).then(res => {
console.log(res)
})
axios({
method: 'post',
url: '/post',
data: data
})
// form-data 表单提交（图片上传，文件上传）
let formData = new FormData()
for (let key in data) {
formData.append(key, data[key])
}
axios.post('/url', formData).then(res => {
console.log(res)
})
PUT
put 请求 (将参数放在请求体中)，两种方式json/form-data
// put请求
axios.put('/put',data).then(res=>{
console.log(res)
})
PATCH
patch请求 (将参数放在请求体中)，两种方式json/form-data
// patch请求
axios.patch('/patch',data).then(res=>{
console.log(res)
})
DELETE
delete (将参数放在请求体中 也可以将参数放在params中)
// delete请求
axios.delete('/delete', {
params: {
id: 12
}
})
axios.delete('/delete', {
data: {
id: 12
}
})
二、并发请求
并发请求：同时进行多个请求，并统一处理返回值
axios.all(
[
axios.get('/data.json'),
axios.get('/city.json')
]
).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes)
})
)
三、axios实例
使用场景： 后端接口地址有多个，并且超时时长不一样或者业务逻辑不同
axios.create({
baseURL: 'http://localhost:8080', // 请求的域名，基本地址
timeout: 1000, // 请求超时时长（ms）
url: '/data.json', //请求路径
method: 'get,post,put,patch,delete', // 请求方法
headers: {
token: ''
}, // 请求头
params: {}, //请求参数拼接在url上
data: {}, //请求参数放在请求体
})
配置
全局配置、实例配置、请求配置
优先级：全局配置<实例配置<请求配置
// 1.axios全局配置
axios.defaults.timeout =1000
axios.defaults.baseURL = 'http://localhost:8080'
// 2.axios实例配置
let instance = axios.create()
instance.defaults.timeout = 3000
// 3.axios请求配置
instance.get('/data.json',{
timeout:5000
})
四、拦截器
拦截器：在请求或响应被处理前拦截他们
请求拦截器的用法
// 请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
return config
}, err => {
// 在请求错误的时候做些什么
return Promise.reject(err)
})
响应拦截器的用法
// 响应拦截器
axios.interceptors.response.use(res => {
// 请求成功对响应数据做处理
return res
}, err => {
// 响应错误做些什么
return Promise.reject(err)
})
取消拦截器
let interceptors = axios.interceptors.request.use(config => {
config.headers = {
auth: true
}
return config
})
axios.interceptors.request.eject(interceptors)
五、错误处理与取消处理
错误处理：在拦截器中用err，如果某请求后面需要单独处理错误，则使用catch()
// 例子：实际开发过程中，一般添加统一错误处理
let instance = axios.create({})
instance.interceptors.request(config => {
return config
}, err => {
// 请求错误 一般http状态码以4开头，常见：401超时，404 not found
$('#modal').show()
setTimeout(() => {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
instance.interceptors.response.use(res => {
return res
}, err => {
// 响应错误处理 一般http状态码以5开头，500 系统错误，502, 系统重启
$('#modal').show()
setTimeout(() => {
$('#modal').hide()
}, 2000)
return Promise.reject(err)
})
instance.get('/data.json').then(res=>{
console.log(res)
}).catch(err=>{
//单独处理错误样式
console.log(err)
})
六、取消请求
用于取消正在进行的http请求
let source = axios.CancelToken.source()
axios.get('/data.json', {
cancelToken: source.token
}).then(res => {
console.log(res)
}).catch(err => {
//取消请求后返回的messge信息
console.log(err)
})
// 取消请求(message可选)
source.cancel('cancel http')
七、封装axios
// service 循环遍历输出不同的请求方法
let instance = axios.create({
baseURL: 'http://localhost:9000/api',
timeout: 1000
})
const Http = {}; // 包裹请求方法的容器
// 请求格式/参数的统一
for (let key in service) {
let api = service[key]; // url method
// async 作用：避免进入回调地狱
Http[key] = async function(
params, // 请求参数 get：url，put，post，patch（data），delete：url
isFormData = false, // 标识是否是form-data请求
config = {} // 配置参数
) {
let newParams = {}
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
// 不同请求的判断
let response = {}; // 请求的返回值
if (api.method === 'put' || api.method === 'post' || api.method === 'patch') {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === 'delete' || api.method === 'get') {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回响应值
}
}
// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config => {
// 发起请求前做些什么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: '加载中...'
})
return config
}, () => {
// 请求错误
Toast.clear()
Toast('请求错误，请求稍后重试')
})
// 响应拦截器
instance.interceptors.response.use(res => {
// 请求成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast('请求错误，请求稍后重试')
})
附：node后台接口服务
后台接口服务目录在gitee代码仓库根目录的axios_node下
如何启动？
进入axios_node目录，首先需要安装依赖npm install，依赖安装完成后输入node index.js启动服务
代码仓库地址 https://gitee.com/EverZc/VueAxios.git
如需文章上方axios X-Mind思维脑图文件，关注微信公众号：文靖撩知识 ，回复axios 即可领取。
