axios
下载:npm install axios --save
起步使用
Axios("http://123.207.32.32:8000/category"
).then(res => {
console.log(res)
}).catch(
error => console.log(error)
)
并发请求
Axios.all([Axios.get("http://123.207.32.32:8000/category"),
Axios.get("http://localhost:8081/#/")]
).then(Axios.spread((res1, res2) => {
console.log(res1)
console.log(res2)
}))
},
全局配置
import Axios from 'axios'
const Instance = Axios.create({
baseURL: "http://123.207.32.32:8000",
timeout: 5000,
})
Instance({
url: '/category',
method: 'get'
}).then(res => {
console.log(res)
}).catch(error => {
console.log(error)
})
axios封装
方案一
// 方案一
// export default (config, success, failure) => {
// const Insatnce = axios.create({
// url: "http://123.207.32.32:8000/category",
// timeout: 5000
// })
// Insatnce(config)
// .then(res => success(res))
// .catch(err => failure(err))
// }
export function request(config, success, failure) {
const Insatnce = axios.create({
url: "http://123.207.32.32:8000/category",
timeout: 5000
})
Insatnce(config)
.then(res => success(res))
.catch(err => failure(err))
}
使用
import {request} from './network/request'
// 方案一使用
request({
url:'',
},
res => console.log(res),
err => console.log(err)
)
方案二
// // 方案二 (使用Promise返回结果)
export function request(config){
return new Promise((resolve, reject) => {
const Insatnce = axios.create({
url: "http://123.207.32.32:8000/category",
timeout: 5000
})
Insatnce(config)
.then(res => { // 这是axios的then
resolve(res) // 这时执行Promise中的then
})
.catch(err => { // 这是axios的catch
reject(err) // 这时执行Promise中的catch
})
})
使用
request({
url:''
})
.then(res => console.log(res))
.catch(err => console.log(err))
方案三
// 方案三
export function request(config){
const Insatnce = axios.create({
url: "http://123.207.32.32:8000/category",
timeout: 5000
})
//案例二中的Insatnce(config)之所以可以调用then和catch方法,是因为Insatnce(config)本身就是一个Promise对象,所以我们可以直接在这里返回,在实例中直接使用then和catch方法
return Insatnce(config)
}
使用
request({
url:''
})
.then(res => console.log(res))
.catch(err => console.log(err))
拦截器
拦截器,可以做全局拦截axios.interceptors,也可以做局部拦截。这里的例子是局部拦截。
请求拦截:Insatnce.interceptors.request.use()
响应拦截:Insatnce.interceptors.response.use()
axios提供拦截器,用于每次发送请求或者得到响应后,进行对应的处理
请求拦截可以做的事情
1、请求拦截中错误拦截较少,通常都是配置相关拦截。
2、可能的错误拦截,比如请求超时,可以将页面跳转到一个错误页面。
响应拦截可以做什么?
1、响应的成功拦截主要是对数据进行过滤。
2、响应的失败拦截,可以根据status判断报错的错误码,跳转到不同的错误页面。