Axios
- npm install axios
- 在 main.js
import Axios from "axios";
Vue.prototype.$Axios = Axios;
5 种请求方法
- get =获取数据
- post = 提交数据(表单提交,文件上传) 一般用于新建、添加
- put = 更新数据(所有数据都推送到后端,后端更新数据库) 一般用于更新
- patch = 更新数据(只把修改的数据推送到后端,后端更新数据库)
- delete = 删除数据
get | post | put | patch | delete 请求
this.$Axios.get("/data.json").then(res => {
console.log(res);
});
并发请求, 使用 axios.all 与 axios.spread 这 2 个 api 来进行 请求与处理数据
this.$Axios
.all([this.$Axios.get("/data.json"), this.$Axios.get("/city.json")])
.then(
this.$Axios.spread((dataRes, cityRes) => {
console.log(dataRes);
console.log(cityRes);
// 或者
console.log(dataRes, cityRes);
})
);
Axios 参数配置
baseURL: "http://localhost:8080"; //请求的域名、基本地址
timeout: 1000; //请求超时时长 默认1000ms,一般后端定义
url: "/data.json"; //请求路径
method: "get、post、put、patch、delete"; //请求方法
headers: {
token: "密钥之类";
} //设置请求头
params: {
} //请求参数拼接在url上
data: {
} //亲求参数放在请求体里
1、axios 全局配置
axios.defaults.timeout = 1000;
axios.defaults.baseURL = "http://localhost:8080";
2、axios 实例配置
let instance = axios.create();
instance.defaults.timeout = 3000;
3、axios 请求配置
instance.get("/data.json", {
timeout: 5000
});
有优先级高-低:3-2-1
在实际开发过程中全局配置用的比较少
- 2 种请求接口:
- http:localhost:9090
- http:localhost:9091
let instacne = axios.create({
baseURL:'http:localhost:9090'
timeout:1000
})
let instacne1 = axios.create({
baseURL:'http:localhost:9091'
timeout:3000
})
//baseURL | timeout | url | method | params
instacne.get('/contactlist',{params{}).
then(res=>console.log(res))
//baseURL | timeout | url | method
instacne1.get('/orderList',{timeout:5000}).
then(res=>console.log(res))
Axios 拦截器
- 在请求或者响应被处理前拦截他们
- 请求拦截器 | 响应拦截器
请求拦截器
axios.interceptors.request.use(
config => {
//发送请求前,做些什么
return config;
},
err => {
//请求错误时,做些什么
return Promise.reject(err);
}
);
响应拦截器
axios.interceptors.response.use(
response => {
//发送成功对响应数据做出处理
return response;
},
err => {
//响应错误做些什么
return Promise.reject(err);
}
);
//这里return一个 response出来,带有then方法与数据。不理解可以去看下Promise
axios
.get("/xxx")
.then(res => console.log(res))
.catch(err => console.log(err));
取消拦截器(了解即可)
let interceptors = axios.interceptors.request.use(config => {
config.headers.auth = ture;
return config;
});
// 取消
axios.interceptors.request.eject(interceptors);
case
// 访问需要登录的接口
let instance = axios.create({});
instance.interceptors.request.use(config => {
config.headers.token = "密钥token";
return config;
});
// 访问不需要登录的接口
let instance = axios.create({});
instance.get('/xxxx').then(res=>console.log(res));
let instance_phone = axios.create({});
instance_phone.interceptors.request.use(config => {
//请求加载模态框
$("#modal").show();
return config;
});
instance_phone.interceptors.response.use(response => {
//关闭模态框
$("#modal").hide();
return response;
});
错误处理-请求错误时进行对应的处理
axios.interceptors.request.use(
config => {
return config;
},
err => {
return Promise.reject(err);
}
);
axios.interceptros.response.uer(
response => {
return response;
},
err => {
return Promise.reject(err);
}
);
this.$Axios
.post("/data.json")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
let instance = axios.create({});
// 请求拦截
instance.interceptors.request.use(
config => {
return config;
},
err => {
//请求错误 这里 http状态码 以4开头
//401 超时
//404 找不到
// 模态框
$("#Modal").show();
setTimeout(function() {
$("#Modal").hide();
}, 2000);
return Promise.reject(err);
}
);
// 响应拦截
instance.interceptors.response.use(
res => {
return res;
},
err => {
// 响应错误处理, http状态码 以5开头
// 500 系统错误
// 502 系统重启
// 模态框
$("#Modal").show();
setTimeout(function() {
$("#Modal").hide();
}, 2000);
return Promise.reject(err);
}
);
// 请求案例
instance
.get("/xxxx")
.then(res => {
console.log("请求成功");
})
.catch(err => {
console.log("如果上面的弹窗还不够,需要特殊处理,那么我们在这里搞定");
});