vue中axios的介绍
一、axiox介绍
1、Axios特性
- 支持Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
2、Axios浏览器支持
二、基础用法（get、post、put等请求方法）
axios的请求方法：get、post、put、patch、delete（常用的五种）
- get:获取数据
- post:提交数据（表单提交+文件上传）
- put:更新数据（所有数据推送到后端）
- patch:更新数据（只将修改的数据推送给后端）
- delete:删除数据
1、get:获取数据
写法一：
//http://localhost:8080/data.json?id=12
axios.get('/data.json',{
params:{
id:12
}
}).then((res){
console.log(res)
})
写法二
axios({
method:'get',
url:'/data.json',
params:{
id:12
}
}).then(res =>{
console.log(res)
})
2、post:提交数据（表单提交+文件上传）
写法一：
let data = {
id:12
}
axios.post('/post',data).then(res =>{
console.log('res)
})
写法二：
axios({
method:'post',
url:'/post',
data:data
}).then(res=>{
console.log(res)
})
数据是JSON的形式
form-data请求
let formdata = new FormData()
for(let key in data){
formdata.append(key,data[key])
}
axios.post("/post",formData).then(res =>{
console.log('res')
})
数据的形式
：
3、put:更新数据（所有数据推送到后端）
同get和post
put与post几乎一样，只是method不一样
4、patch:更新数据（只将修改的数据推送给后端）
同get和post
5、delete:删除数据
写法一
axios.delete('/delete',{
params:{
id:12
}
}).then(res =>{
console.log(res)
})
axios.delete('/delete',{
data:{
id:12
}
}).then(res =>{
console.log(res)
})
写法二
axios({
method:'delete',
url:'/delete',
params:{},
data:{}
}).then(res => {
console.log(res)
})
什么是并发请求？
并发请求：同时进行多个请求，并统一处理
请求的方法:
axios.all()
axios.spread()
axios.all(
[
axios.get('/data.json‘),
axios.get('/city.json‘),
]
).then(
axios.spread((dataRes,cityRes) => {
console.log(dataRes,cityRes)
})
)
三、进阶用法（实例、配置、拦截器、取消请求等）
1、创建axios实例
当后端接口地址有多个，并且超时时长不一样时可以创建一个axios实例
let instance = axios.create({
baseURL:'http://localhost:8080',
timeout:1000
})
let axios2= axios.create({
baseURL:'http://localhost:9090',
timeout:5000
})
instance.get('/data.json').then(res =>{
console.log(res)
})
axios2.get('/city.json').then(res =>{
console.log(res)
})
2、实例的相关配置
axios的配置：
axios.create({
baseURL:'', //请求的域名，基本地址
timeout:1000, //超时时长（ms）
url:'/data.json' , //请求路径
method：’get‘ , //请求方法 get/post/pu/patch/delete
headers:{ //请求头
token:' '
},
params:{}, //请求参数拼接在url上
data:{}, //请求参数放在请求体
})
axios.get('/data.json',{
params:{
id:12
}
})
axios.get('/data.json',{}),有两个参数，第二个参数就是写axios实例的相关配置的
- axios全局配置
- axios实例配置
- axios请求配置
1、axios全局配置
axios.defaulte.timeout = 1000 axios.defaulte.baseURL = 'http://localhost:8080'
一般全局配置都只是修改这两个参数
2、axios实例配置
let instance = axios.create() instance.defaults.timeout = 3000
3、请求配置
instance.get('data.json',{
timeout:5000
})
优先级：请求配置 > 实例配置 > 全局配置
3、在实际开发中
实例1：
有两种请求接口：http:localhost:9090 、http:localhost:9091
let instance = axios.create({
baseURL:'http:localhost:9090',
timeout:1000
})
let instance1 = axios.create({
baseURL:'http:localhost:9091',
timeout:3000
})
instance.get('/contactList',{
params:{ id:12 }
}).then((res) =>{
console.log(res)
})//此实例应用到了baseURL，timeout，url，method,params
实例2：
只有一个方法的数据量很大时，修改此方法的超时时长
instance1.get('/contactList',{
timeout:5000
}).then((res) =>{
console.log(res)
})
//此实例应用到了baseURL、timeout:5000、method、url
4、拦截器
拦截器： 在请求或响应被处理前拦截它们
- 请求拦截器
- 响应拦截器
请求拦截器
axios.interceptors.request.use
(config =>{
//在发送请求前做些什么
return config
}) ,err=>{
//在请求错误的时候做些什么
return Promise.reject(err)
}
响应拦截器
axios.interceptors.response.use
(res =>{
//请求成功对响应数据作处理
return res //这里的res返回后是axios.get().then(res=>{})中的res
}),errr=>{
//响应错误做写什么
return Promise.reject(err) //这里的err返回后是axios.get().then().catch(err =>{})中的err
}
取消拦截器（了解,一般情况下不会取消拦截器的）
let interceptors = axios.interceptors.request.use
(config =>{
config.headers= {
auth:true
}
return config
})
axios.interceptors.request.eject(interceptors)
5、错误处理
axios.get('/data.json').then((res) =>{
console.log(res)
}).catch(err =>{
console.log(err)
})
实例：实际开发过程中，一般添加统一错误处理
错误处理---请求拦截器
let instance = axios.create({})
instance.interceptors.request(config =>{
return config
},err=>{
//一般请求错误http状态码以4开头，常见：401 超时；404 not found
$('#modal').show()
setTimeout(() =>{
$('#modal').hide()
},200)
return Promise.reject(err)
})
错误处理---响应拦截器
instance.interceptors.response.use(res =>{
return res
},err=>{
//一般响应错误http状态码以5开头，常见：500 系统错误；502系统重启
$('#modal').show()
setTimeout(() =>{
$('#modal').hide()
},200)
return Promise.reject(err)
})
取消请求（了解，几乎用不到）
四、axios进一步封装，在项目中的实际应用
axios的封装(重点)
- 统一管理url
- 对请求统一的封装
一、新建文件 /service/contactApi.js
const CONTACT_API = { //例子：获取联系人列表 getContactList:{ method:'get', url:'/contactList' } //例子：新建联系人 from-data newContactForm:{ method:'post', url:'/contact/new/form' } //例子：新建联系人 application/json newContactJson:{ method:'post', url:'/contact/new/json' } //例子：编辑联系人 editContact:{ method:'put', url:'/contact/edit' } //例子：删除联系人 deleteContact:{ method:'delete', url:'/contact' } ｝ export default CONTACT_API
二、封装axios,新建/service/http.js
import axios from 'axios' import service from './contactApi' import Toast from 'Vant' //service循环遍历输出不同的请求方法 let instance = axios.create({ baseURL:'http://localhost:9000/api', timeout:1000 }) const Http = {} //包裹请求方法的容器 //请求格式/参数的统一 for(let key in service){ //这里的key代表的是newContactJson,editContact等 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.interceptorswx.request(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('请求错误，请稍后重试') }) export default Http
三、调用Http
在main.js
import Http from './service/http' //把Http挂载到Vue实例上 Vue.prototype.$Http = Http
四、使用接口
methods:{ // 查询 async getList(){ let res = await this.$Http.getContactList() this.list = res.data }
五、扩展
浙公网安备 33010602011771号