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

請求攔截器

響應攔截器

axios相關配置

創建axios實例

npm add axios

axios特性，。。

//實際開發過程中，一般添加統一錯誤處理

let instance = axios.create({})

instance.interceptors.request.use(

????config=>{

????????return config

????},err=>{

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

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

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

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

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

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

????}

)

instance.interceptors.response.use(

????res=>{

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

????},err=>{

????????//響應錯誤處理 一般http狀態碼以5開頭，500 系統錯誤，502 系統重啟

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

????}

)

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

//請求攔截器，響應攔截器

import axios from 'axios'

export default{

????name:'axios3',

????created(){

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

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

????????????//在發送請求前做些什么

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

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

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

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

????????})

????????//響應攔截器

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

????????????//請求成功對響應數據做處理

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

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

????????????//響應錯誤做些什么

????????????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)

//例子? 登錄狀態（token:''）

let instance = axios.create({})

instance.interceptors.request.use(

????config=>{

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

????????return config

????}

)

//不需要登錄的接口

let newInstance = axios.create({})

//移動端開發

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

})

實際開發中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基本配置參數

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

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

參數3、url：請求路徑。

參數4、method：請求方法。

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

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

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

axios定義配置參數的位置

1、axios全局配置（相當于在import的axios的vue頁面中對所有創建的axios進行全局配置）

axios.defaults：表示指向axios庫的默認配置，defaults后面就可以.出來配置參數。

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

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

2、axios實例配置（相當于局部的）

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

instance.defaults.timeout=3000，這種方式是創建完實例之后去設置參數。

3、axios請求配置（發送請求時）

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

? ?timeout:5000

}）

參數配置優先級：全局<局部<請求。如上，最終timeout為5000。

使用vantUI組件庫進行移動端開發

/*

接口文檔： 接口url ，請求方式，請求參數，備注

1. 下載node 文件

2. npm install 安裝依賴

3. node index。js? 啟動后端服務

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 組件庫? 主要針對移動端

/*

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

babel-plugin-import?

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

[Button.name]:Button

*/

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

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

//錯誤處理 :請求錯誤時進行的處理

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=>{//無論是請求錯誤還是響應錯誤都會進入catch
console.log(err)
})

//實例?實際開發時會寫一個統一的錯誤處理
let?inters=axios.create({})
inters.axios.interceptors.request.use(config=>{
return?config
},err=>{
????//請求錯誤?一般http狀態碼以4開頭：常見401超時，404?找不到?not?found
????
????$('modal').show();
????setTimeout(()=>{
????????$('modal').hide();
????},2000)
????return?Promise.reject(err)
})
iners.axios.inerceptors.responce.use(config=>{
????return?config
},err=>{
//響應錯誤處理。一般http狀態碼以5開頭：500?系統錯誤，502?系統重啟
?????$('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 攔截器：在請求或響應被處理前攔截它們。請求前攔截，響應后攔截

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

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 inter=axios.interceptors.request.use(config=>{

config,headers={auth:true}

return config

})

//使用攔截器

axios.inerceptors.request.eject(inter)

//例子 登陸狀態（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的配置參數?axios.create({?baseURL:'http://local host:8080',//請求域名基本地址?timeout:1000,//請求超時時長?url:'/data.json'//請求路徑?method:'get,post,put,patch,delete'//請求數據，整包提交數據，整包更新數據，提交更新部分數據，刪除數據?header:{token：''},//請求頭 ?params:{}//請求參數拼接在url?data：{}//請求參數放在請求體里?})?//配置參數?//1axios全局配置?axios.defaults.baseURL='。。。'?//axios實例配置?let insdence =axios.create ()?instance.defaults.baseURL='。。。'?//axios請求配置?instance.get('/data.json',{timeout:....})?//實際使用?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的配置參數

axios.create({

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

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

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

method:'get,post,put,patch,delete'//請求數據，整包提交數據，整包更新數據，提交更新部分數據，刪除數據

header:{

token：''

},//請求頭

params:{}//請求參數拼接在url

data：{}//請求參數放在請求體里

})

//配置參數

//1axios全局配置

axios.defaults.baseURL='。。。'

//axios實例配置

let insdence =axios.create ()

instance.defaults.baseURL='。。。'

//axios請求配置

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

timeout:....

})