第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

請求攔截器

響應(yīng)攔截器

axios相關(guān)配置

創(chuàng)建axios實(shí)例

npm add axios

axios特性，。。

//實(shí)際開發(fā)過程中，一般添加統(tǒng)一錯誤處理

let instance = axios.create({})

instance.interceptors.request.use(

????config=>{

????????return config

????},err=>{

????????$('#model').show()

????????setTimeout(()=>{

????????????$('#model').hide()

????????},2000)

????????//請求錯誤 一般http狀態(tài)碼以4開頭，常見：401超時，404 not found

????????return Promise.reject(err)????

????}

)

instance.interceptors.response.use(

????res=>{

????????return res????

????},err=>{

????????//響應(yīng)錯誤處理 一般http狀態(tài)碼以5開頭，500 系統(tǒng)錯誤，502 系統(tǒng)重啟

????????return Promise.reject(err)

????}

)

//攔截器：在請求或響應(yīng)被處理前攔截它們

//請求攔截器，響應(yīng)攔截器

import axios from 'axios'

export default{

????name:'axios3',

????created(){

????????//請求攔截器

????????axios.interceptors.request.use(config=>{

????????????//在發(fā)送請求前做些什么

????????????return config

????????},err=>{

????????????//在請求錯誤的時候做些什么

????????????return Promise.reject(err)

????????})

????????//響應(yīng)攔截器

????????axios.interceptors.response.use(res=>{

????????????//請求成功對響應(yīng)數(shù)據(jù)做處理

????????????return res

????????},err=>{

????????????//響應(yīng)錯誤做些什么

????????????return Promise.reject(err)

????????})

????}

}

請求

axios.get().then(res=>{}).catch(err=>{})

//取消攔截器

let interceptors = axios.interceptors.request.use(

????config =>{

?????????config.headers={

????????????auth:true

????????}

????????return config

????})

axios.interceptors.request.eject(interceptors)

//例子? 登錄狀態(tài)（token:''）

let instance = axios.create({})

instance.interceptors.request.use(

????config=>{

????????config.headers.token = ''

????????return config

????}

)

//不需要登錄的接口

let newInstance = axios.create({})

//移動端開發(fā)

let instance_phone = axios.create({})

instance_phone.interceptors.rquest.use(config=>{

????$('#model').show()

????return config

})

instance_phone.interceptors.response.use(res=>{

????$('#model').hide()

????return res

})

實(shí)際開發(fā)中axios的使用：

let instance = axios.create({

????baseURL:'http:localhost:9090',

????timeout:1000

})

let instace1= axios.create({

????baseURL:'http:localhost:9091',

????timeout:3000

})

instance.get('/contactList',{

????params:{}

}).then((res) =>{

????console.log(res)

})

axios基本配置參數(shù)

參數(shù)1、baseURL：請求域名，或者是基本地址（默認(rèn)配置http://localhost:8080，就像通過axios的get('/data.json'）訪問時，前面添加了默認(rèn)的域名。

參數(shù)2、timeout：超時時長，默認(rèn)1000毫秒（超時時長作用：一般它由后端定義，例如：請求一個接口，接口的數(shù)據(jù)量比較大，需要處理時間比較長，如果超過了這個時間，后端就會返回401，這樣做的好處是，一旦請求時間較長，使這個請求不會阻塞后端的內(nèi)容，減少服務(wù)器的壓力，它就會及時釋放超時的這些內(nèi)容，超時時長不止后端需要設(shè)置，前端也需要設(shè)置一下，當(dāng)超時時，請求就取消了）。

參數(shù)3、url：請求路徑。

參數(shù)4、method：請求方法。

參數(shù)5、headers：請求頭，可以在請求頭里添加一些參數(shù)（比如登錄時可能需要從請求頭里獲取token，去鑒權(quán)獲取登錄人信息，此時就需要在這里配置）。

參數(shù)6、params{}：請求參數(shù)放置在請求頭中。

參數(shù)7、data：{}請求參數(shù)放置在請球體中。

axios定義配置參數(shù)的位置

1、axios全局配置（相當(dāng)于在import的axios的vue頁面中對所有創(chuàng)建的axios進(jìn)行全局配置）

axios.defaults：表示指向axios庫的默認(rèn)配置，defaults后面就可以.出來配置參數(shù)。

axios.defaults.timeout=2000,此時就表示全局配置。

axios.defaults.baseURL='http://localhost:8080'。

2、axios實(shí)例配置（相當(dāng)于局部的）

let?instance=axios.create()，如果不傳配置參數(shù)，如果定義了全局，就是用全局，否則使用默認(rèn)的。

instance.defaults.timeout=3000，這種方式是創(chuàng)建完實(shí)例之后去設(shè)置參數(shù)。

3、axios請求配置（發(fā)送請求時）

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

? ?timeout:5000

}）

參數(shù)配置優(yōu)先級：全局<局部<請求。如上，最終timeout為5000。

使用vantUI組件庫進(jìn)行移動端開發(fā)

/*

接口文檔： 接口url ，請求方式，請求參數(shù)，備注

1. 下載node 文件

2. npm install 安裝依賴

3. node index。js? 啟動后端服務(wù)

4. 打開瀏覽器 localhost：9000/api/xxxxx
   

*/

<van-contact-list
:list="list"
@add="onAdd"
@edit="onEdit"
@select?="onSelect"/>

import?{contactlist}??from?'vant'

components:

methods:{

onAdd(){
//新增
}
onEdit(){
//編輯
}
onSelect(){
//選取
}

//引入vant 組件庫? 主要針對移動端

/*

常規(guī)選擇第一種引入方式，按需引入，需要安裝插件

babel-plugin-import?

?頁面中引入時 注意語法?

[Button.name]:Button

*/

//取消正在進(jìn)行的http請求（了解，日常使用不多）

let?source=axios.CancelToken.source()
axios.get('/data.json',{
cancelToken:source.token
}).then(res=>{
????console.log(res)
}).catch(err=>{
console.log(err)
})
//取消請求??cancel的參數(shù)為可選，為空時?catch的err為空
source.cancel('cancel?http')
//什么情況會用到取消取消
//crm?需要請求大量數(shù)據(jù)時?返回時間較久

//錯誤處理 :請求錯誤時進(jìn)行的處理

axios.interceptors.request.use(config=>{
?return?config
},err=>{
????return?Promise?reject(err)
})
axios.inerceptors.responce.use(config=>{
?return?config
},err=>{
return?Promise?reject(err)
})
axios.get('/data.json').then(res=>{
console.log(res)
}).catch(err=>{//無論是請求錯誤還是響應(yīng)錯誤都會進(jìn)入catch
console.log(err)
})

//實(shí)例?實(shí)際開發(fā)時會寫一個統(tǒng)一的錯誤處理
let?inters=axios.create({})
inters.axios.interceptors.request.use(config=>{
return?config
},err=>{
????//請求錯誤?一般http狀態(tài)碼以4開頭：常見401超時，404?找不到?not?found
????
????$('modal').show();
????setTimeout(()=>{
????????$('modal').hide();
????},2000)
????return?Promise.reject(err)
})
iners.axios.inerceptors.responce.use(config=>{
????return?config
},err=>{
//響應(yīng)錯誤處理。一般http狀態(tài)碼以5開頭：500?系統(tǒng)錯誤，502?系統(tǒng)重啟
?????$('modal').show();
????setTimeout(()=>{
????????$('modal').hide();
????},2000)
????return?Promise.reject(err)
})
iners.axios.get('/data.json').then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})

//axios 攔截器：在請求或響應(yīng)被處理前攔截它們。請求前攔截，響應(yīng)后攔截

//使用語法。1請求攔截器

axios.interceptors.request.use(config=>{

//發(fā)送請求前做什么

????return config

},err=>{

//在請求錯誤的時候做些什么

return promise.reject(err)

})

//響應(yīng)攔截器

axios.interceptors.response.use(res=>{

//請求接口成功對響應(yīng)數(shù)據(jù)做處理

return res

},err=>{

????//響應(yīng)錯誤做什么,到了后斷返回的錯誤

????return promise.reject(err)

})

//取消攔截器（了解）,? ? 實(shí)際開發(fā)很少用到

let inter=axios.interceptors.request.use(config=>{

config,headers={auth:true}

return config

})

//使用攔截器

axios.inerceptors.request.eject(inter)

//例子 登陸狀態(tài)（token:''）訪問登陸的接口

let instance=axios.create({})

instance.inerceptors.request.use(

config=>{

????config.headers.token=''

})

//訪問不用登陸的接口

let insterNew=axios.create({})

insterNew.interceptors.request.use(config=>{

????$('#modal').show();

return config

})

insterNew.interceptors.resbonce.use(res=>{

$('modal').hide()

return res

})

//axios的配置參數(shù)?axios.create({?baseURL:'http://local host:8080',//請求域名基本地址?timeout:1000,//請求超時時長?url:'/data.json'//請求路徑?method:'get,post,put,patch,delete'//請求數(shù)據(jù)，整包提交數(shù)據(jù)，整包更新數(shù)據(jù)，提交更新部分?jǐn)?shù)據(jù)，刪除數(shù)據(jù)?header:{token：''},//請求頭 ?params:{}//請求參數(shù)拼接在url?data：{}//請求參數(shù)放在請求體里?})?//配置參數(shù)?//1axios全局配置?axios.defaults.baseURL='。。。'?//axios實(shí)例配置?let insdence =axios.create ()?instance.defaults.baseURL='。。。'?//axios請求配置?instance.get('/data.json',{timeout:....})?//實(shí)際使用?let in=axios.create({baseURL:pp:8080,timeout:1000})?let in2=axios.create ({baseURL:pp:9090,timeout:3000})?in.get('/data list',{params:{}}).then(res=>{console.log(res)})?in2.get('/data.json',{timeout:4000}).then(res=>{console.log(res)})

//axios的配置參數(shù)

axios.create({

baseURL:'http://local host:8080',//請求域名基本地址

timeout:1000,//請求超時時長

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

method:'get,post,put,patch,delete'//請求數(shù)據(jù)，整包提交數(shù)據(jù)，整包更新數(shù)據(jù)，提交更新部分?jǐn)?shù)據(jù)，刪除數(shù)據(jù)

header:{

token：''

},//請求頭

params:{}//請求參數(shù)拼接在url

data：{}//請求參數(shù)放在請求體里

})

//配置參數(shù)

//1axios全局配置

axios.defaults.baseURL='。。。'

//axios實(shí)例配置

let insdence =axios.create ()

instance.defaults.baseURL='。。。'

//axios請求配置

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

timeout:....

})