axios机能特征在应用程序中推送XMLHttpRequest允诺在node.js中推送http允诺全力支持Promise API截击允诺和积极响应切换允诺和积极响应统计数据
加装 axios
npm installaxios–save
axios 基本上采用
import axios from axios;
axios({
url: http://127.0.0.1:8080/home/multidata,
method: get // 不选定method时： 预设get允诺
}).then(res => {
console.log(res);
})axios 推送mammalian允诺
axios.all([axios({
url: url1,params: {
允诺模块1: 模块1,
允诺模块2: 模块2
}
}),axios({
url: url2,
params: {
允诺模块1: 模块1
}
})]).then(results => {
console.log(results);
})
/**
推送mammalian允诺，比如这儿的三个，
回到的统计数据results是两个字符串
results[0] === url1 的回到统计数据
results[1] === url2 的回到统计数据
*/
axios.spread
axios.all([axios({url: url1,
params: {
允诺模块1: 模块1,
允诺模块2: 模块2
}
}),axios({
url: url2,
params: {
允诺模块1: 模块1}
})]).then(axios.spread((res1,res2) =>{
console.log(res1)
console.log(res2);
}))axios配置信息
全局配置实际上，开发中可能很多模块都是固定的，比如 url前缀这时候可以进行一些抽取，可以利用axios的全局配置axios.defaults.baseURL = http://127.0.0.0:8080 //设置公共url
axios.defaults.timeout = 5000//设置允诺超时时间，单位毫秒常见配置选项允诺地址url: /user允诺类型method: get允诺根路径baseURL: http://127.0.0.0:8080允诺前统计数据处理transformRequest: [function(data){}]允诺后统计数据处理transfromResponse: [function(data){}]自定义允诺头headers: {x-Requested-With:XMLHttpRequest}URL查询对象parms: {id: 12}查询对象序列化函数paramsSerializer: function(params){}request bodydata: {key: value}超时设置(单位毫秒)timeout: 1000跨域是否携带TokenwihtCredemtials: false自定义允诺处理adapter: function(resolve, reject, config)()身份验证信息auth: {uname: uname, pwd: 123}积极响应的统计数据格式 json/blob/document/arraybuffer/text/streamresponseType: jsonaxios 的实例
当从axios模块中导入对象时，采用的实例就是预设的实例当给该实例设置一些预设配置时，这些配置就被固定下来了但是后续开发中，某些配置可能会不太一样比如某些允诺需要采用特定的 baseURL或者timeout等这个时候，就可以创建新的实例，并且传入属于该实例的配置信息//采用axios.create创建实例
const instance1 = axios.create({
baseURL: http://127.0.0.0:8080, //传入公共接口地址
timeout: 5000 //设置此实例得超时时间
})//采用实例
instance1({
url: /home/multidata
}).then(res =>{
console.log(res);
});instance1({
url: /home/data,
params: { //传入允诺模块，params是针对于get允诺得
type: pop,
page: 1
}
}).then(res => {console.log(res);
})
//如果有其他允诺需要用到其他的配置，这时候就可以采用axios.create创建其他实例
封装两个网络允诺模块
/**
* /src/network/request.js
config:
这个模块只负责网络允诺，对于统计数据处理交给调用该模块的组件传入的回调函数处理
*/
/**
* /src/network/request.js
*/
import axios from axios;
// 封装形式1
// export function request(config) {
// return new Promise(((resolve, reject) => {
//
// //1.创建axios实例
// const instance = axios.create({
// baseURL: http://152.136.185.210:8000,
// timeout: 5000
// });
//
// //推送网络允诺
// instance(config)
// .then(res => {
// resolve(res);
// })
// .catch(err => {
// reject(err);
// })
// }))
// }
//封装形式2
export function request(config) {
//1. 创建axios实例
const instance = axios.create({
baseURL: http://127.0.0.0:8080,
timeout: 5000
})
// 推送网络允诺
return instance(config); //他本身的回到值就是两个promise
//所以直接回到它
}<template>
<div id=“app”>
<p>{{results}}</p>
</div>
</template>
<script>
import {request} from ./network/request
export default {
name: App,
data(){
return {
results:
}
},
created() {
//上面两种封装形式不影响这个地方的采用
request({
url: /home/multidata
}).then(res =>{
this.results = res;
}).catch(err =>{
console.log(err);
})
}
}</script>
axios截击器的采用
全局截击axios.interceptors.request.use()截击当前实例instance.interceptors.request.use截击器的作用比如config中的一些信息不符合服务器要求比如每次推送网络允诺，都希望在界面中显示两个允诺的图标某些网络允诺必须携带一些特殊信息，比如登陆 token允诺截击 instance.interceptors.request.useexport function request(config) {
//1. 创建axios实例
constinstance = axios.create({
baseURL:http://152.136.185.210:8000,
timeout: 5000
})
//允诺截击instance.interceptors.request.use(config => {
//console.log(config);
//必须回到config
return config;
}, err => {
//console.log(err);
})
//积极响应截击
instance.interceptors.response.use(res => {
console.log(res);
return res.data;
}, err => {
console.log(err);
})
// 3. 推送网络允诺
return instance(config);
}戳我看VueX采用干货
