亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

實戰。項目環境配置

vant 組件庫 引入

//取消請求：取消正在進行的HTTP請求

let?source?=?axios.CancelToken.soure()
axios.get('/data.json'{
????cancelToken:source.token
}).then(res=>{
????console.log(res)
}).catch(err=>{
????console.log(err)
})
//取消請求(msg可選)
source.cancel('cancel?http')
//什么情況可能用
商城?大批量數據查詢?3-5秒

axios錯誤處理 ：請求錯誤時進行的處理

axios.interceptors.request.use(config=>{
????return?config
},err=>{
????return?Promise.reject(err)?
})

axios.interceptors.response.use(res=>{
????return?res
},err=>{
????return?Promise.reject(err)??
})

//無論是請求錯誤還是響應錯誤都會進到catch里
axios.get('/data.json').then(res=>{
}).catch(err=>{
????console.log(err)
})

//例子，實際開發中?一般添加統一的錯誤處理
let?instance?=?axios.create({})
instance.interceptors.request.use(config=>{
????return?config
},err=>{
????//請求錯誤?一般http狀態碼開頭，常見?401超時?404?not?fonud
????$('#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)??
})

//如果是不需要做特殊的錯誤處理就不需要寫.catch
instance.get('/data.json').then(res=>{
????console.log(res)???//
}).catch(err=>{})

攔截器 實例? 登錄狀態? token: ''

//開發的時候一般是給實例添加攔截器，給全局添加會造成全局污染

//需要登錄的接口
let?instance?=?axiios.create({})
instance.interceptors.request.use(config=>{
????config.headers.token?=?''
????return?config
})

//不需要登錄的接口，另外創建一個實例
let?newInstance?=?axios.create({})

//移動端開發

let?instance_phone?=?axiios.create({})
//請求等待樣式
instance_phone.interceptors.request.use(config=>{
????$('#modal').show()
????return?config
})?
//返回響應樣式
instance_phone.interceptors.response.use(res=>{
????$('#modal').show().hide()
????return?res
})

攔截器? 在請求或響應被處理前攔截它們

請求攔截器? ? ?

axios.interceptors.request.use(config=>{
????//在發送請求前做些什么
????return?config
},err=>{
????//在請求錯誤的時候做些什么
????return?Promis.reject(err)
})

響應攔截器

axios.interceptors.response.use(res=>{
????//請求成功對響應數據做處理
????return?res
},err=>{
????//響應錯誤做些什么
????return?Promise.reject(err)
})

//取消攔截器? ，不常用 不重要

//axios的相關配置

//基本的配置參數 常用

axios.create({

????baseURL:' ' ， //請求的域名，基本地址

????timeout:1000, //請求的超市時長，前后端協作

????url: '/data.json',? //請求路徑

????method: 'get,post , put, patch, delete', //請求方法

????headers:{

????????token: ' '

????}, //請求頭

????params:{ }, //請求參數? 會拼接在url上

????data: { }， //請求參數 放在請求體

})

1、axios? 全局配置

? ? axios.defaults.timeout =1000

????axios.defaults.baseURL = 'http://loca'host:8080'

2、axios 實例配置

let?instance?=?axios.create()
instance.defaults.timeout?=?3000

3、axios請求配置

instance.get('/data.json'{
????timeout:5000
})

//axios實例

//后端接口地址有多個，并且超時時長不一樣

創建實例

let instance = axios.create({

????baseURL : 'http://localhost:8080',

????timeout: 1000

})

怎么用

instance.get('/data.json').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)

????})

)

axios.delete('/delete',config).then()

config

axios.delete('delete',{

????params:{

????????id: 12

????}

}).then(res=>{console.log(res)})

//加地址后邊 delete?id=12

axios.delete('/delete',{

????data:{

????????id: 12

????}

}).then(res=>{console.log(res)})

//不加地址后邊

不用別名些話

axios({

????method:'delete',

????url: '/delete'

????params:{}

}).then(res=>{console.log(res)})

post 兩種提交 form-data? 和 applicition/json

form-data提交，先建立個FormData對象

get 兩種寫法：

axios.get('/data.json',{

????params:{

????????id:12

????}

}).then((res)=>{

????console.log(res)

})

axios({

????methord: 'get',

????url: '/data.json',

????params:{

????????id:12

????}

}).then(res=>{

????console.log(res)

})

axios請求
get 獲取數據，post 提交數據（表單+工作文件上傳）

put 更新數據（所有數據推送到后端）

patch 更新數據 （只將修改的數據推送到后端）

delete 刪除數據

具體用那種方法 是由后端定義

//并發請求
axios.all([
????axios.get('/data.json'),
????axios.get('/data1.json')
]).then(
????axios.spread((data,data1)=>{
????????console.log(data,data1)
???})
)

axios請求方法：get、post、put、patch、delete

get:獲取數據

post：提交數據（表單提交+文件上傳）

put：更新數據（所有數據推送到后端）

patch：更新數據（只將修改的數據推送到后端）

delete：刪除數據

請求攜帶參數：

//最終請求的路徑為：HTTP://localhost:8080/data.json?id=12
axios.get('./data.json',{
????params:{
????????id:12
????}
}).then(res=>{
????console.log(res)
})

axios({
????url:'./data.json',
????params:{
????????id:12
????}
}).then(res=>{
????console.log(res)
})

?axios?請求方法：get post put patch delete
get:獲取數據

post:提交數據（表單提交+文件上傳）

put：更新數據（所有數據推送到后端）

patch:更新數據（只將修改的數據推送）

detele:刪除數據