axios对ajax申请进行了封装，并且应用promise的链式调用使得网络申请的代码逻辑更为清晰，同时反对async和await的编写形式使代码看起来像同步，更加不便于了解和浏览。axios这个库的体积也不大，先在我的项目里进行装置，npm i axios –save，而后引入就能够间接应用。
import axios from 'axios';
axios({
url: 'https://httpbin.org/post',
method: 'post', // 默认为get
data: { // post申请传递参数用data, get申请传递参数用params
name: 'macus',
age: 18
}
}).then(value=>{
// 获取申请胜利的后果
console.log(value)
}).catch(error=>{
// 获取申请发送失败的后果
console.log('error', error)
})以下图片是axios的胜利响应返回的后果，能够看到返回的信息十分的多，其中data是服务器真正返回的内容，而其它的信息全都是axios提供的，其中包含申请的配置config，头部信息headers，XMLHttpRquest的响应状态
axios还提供了很多的API用于发送不同的网络申请，以上申请还能够写成以下模式，这样就不必写method属性，更为简洁一些
axios.post('https://httpbin.org/get', {
name: 'macus',
age: 18
})还有很多其它的API
axios.get / axios.put / axios.delete / axios.request尽管api的名字不同，其实这些api全都是调用的axios.request办法，以下为axios源码，能够看到都是调用的Axios.prototype.request
一般来说，业务的网络申请地址的域名都是固定的，能够在发送申请时定义一个baseURL
// 发送申请时定义baseURL
axios({
baseURL: 'https://httpbin.org',
url: '/post',
method: 'post', // 默认为get
data: {
name: 'macus',
age: 18
}
})每一个申请都定义一个baseURL使得代码冗余，这里能够在全局的配置项里进行定义
// 通过axios.defaults进行全局配置
axios.defaults.baseURL = 'https://httpbin.org'
axios({
url: '/post',
method: 'post', // 默认为get
data: {
name: 'macus',
age: 18
}
})当有多个域名用于网络申请时，定义一个默认全局的baseURL就显著不够用了，axios提供了自定义实例的形式，咱们能够通过axios.create定义多个实例用于配置不同类型的网络申请，定义之后发送网络申请形式与通过axios这个实例对象去调用统一
const instance = axios.create({
baseURL: 'https://httpbin.org'
})
instance.get('/get', {
params: {
name: 'macus'
}
})有时候，咱们想对申请和响应做一些对立的解决，比方发送申请的时候展现加载的动画、查看申请参数中有没有携带token，如果没有就须要用户登录，再比方，响应报文返回的数据项太多，而咱们只须要服务器返回的数据就行，那么这个时候，能够应用拦截器来对申请和响应进行通用的解决，这里再应用下面创立的instance实例对象。
// 对申请进行拦挡，别离传入申请胜利和失败的处理函数
instance.interceptors.request.use(config=>{
// 能够在这里进行一些逻辑解决
console.log('申请拦挡了', config)
// config为申请的配置项信息，必须要有申请报文的返回
return config
}, error=>{
// 解决申请失败
})
// 对响应进行拦挡，别离传入响应胜利和失败的处理函数
instance.interceptors.response.use(result=>{
console.log('响应拦挡了',result)
// result为响应信息，必须将响应报文进行返回
// 只须要服务器返回的data数据，可间接返回data
return result.data
}，error=>{
// 失败时的解决形式，如 404 500 等
})
目前每发送一个网络申请，都须要调用axios的实例，如果有一天这个库有bug，或者后续将我的项目进行优化，想应用别的库，那么有100处发送了网络申请，这100处都须要批改，这样代码的可维护性变得比拟差，为了解决这样的问题，咱们能够自行进行一个封装，每发送网络申请，都应用咱们自定义的函数，这样后续即便想换成别的库，间接批改咱们封装的函数就行，上面做一个简略封装的演示
// ajaxRequest.js
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000 // 超时工夫
})
export function requestPost(url, data, successCallback, errorCallback){
instance({
url,
data,
method: 'post'
}).then(successCallback)
.catch(errorCallback)
}
//调用的页面
import { requestPost} from './ajaxRequest'
requestPost('/post', {name: 'kiki'}, result=>{
console.log('胜利了',result)
},error=>{
console.log('失败了',error)
})以上就是axio的疾速上手应用~
发表回复