一、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
}
五、扩展