//最简单的aixos实例
axios({
url:'http地址',
//不写method,默认传get 请求
method:'get'
}).then(res=>{
console.log(res)
})
//另一种方式
axios.get('http地址')
.then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
axios({
//url:'http地址',
//上面的方式可以写成如下
//专门针对get的参数拼接
url:'http地址',
params:{
type:'sell',
page:3
}
}).then(res=>{
console.log(res)
})
支持多种请求方式
axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data,[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data,[,config]])
//2.axios发送并发请求
axios.all([axios({
url:'host/home/multidata'
}),axios({
url:'host/home/data',
params:{
type:'sell',
page:5
}
})]).then(results=>{
console.log(results)
})
//有时候,我们可能需求同时发送两个请求
使用axios.all([])放回的结果是一个数组,使用axios.spread可将数组[res1,res2]展开res1,res2
import axios from 'axios'
export default{
name:'app',
created(){
//发送并发请求
axios.all([axios.get('http://123/home/mult'),
axios.get('http://123/home/page1'),
{
params:{
type:'sell',page:1 }}])
.then(axios.spread((res1,res2)=>{
console.log(res1)
console.log(res2)
}))
}
}
3.全局配置
axios.defaults.baseURL='http://host'
axios.defaults.timeout=5000
axios.all([axios({
url:'/home'
}),axios({
url:'/home',
params:{
type:'sell',
page:1
}
})])
常见的配置选项
4.创建对应的axios的实例
5.axios 模块封装
在/src/network/request.js
在main.js
//封装request模块
import {request} from ‘./network/request’
success是一个回调函数
传递到request里
原本console.log(其实可以不用再打印)
亦可以直接只传一个config
main.js 中request修改为如下代码:
但是如下方法并不是最佳解决方法:
可以axios修改为promise 异步调用形式:
在main.js中的request
调用res和err
其实还可以这么写
直接return config,因为config 返回的值就是一个promise
拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
axios拦截器基本格式:
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器,可以这样:
const myInterceptor = axios.interceptors.request.use(function () {
/*...*/});
axios.interceptors.request.eject(myInterceptor);
可以为自定义 axios 实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(function () {
/*...*/});
调用关系:
function test(aaa,bbb){
aaa(‘res’)
bbb(‘err’)
//aaa()指向第一个function(),aaa()实际保存第一个function的内存地址
//bbb()指向第二个function(),bbb()实际保存的是第二个function的内存地址
}
test(function(){
console.log(res)
},function(){
console.log(err)
})
request.js中第一个参数config,success,failure
第一个参数对应下图的url
第二个参数对应res
第三个参数对应err