1、Axios网络请求完整封装及使用(重点)
在日常应用过程中,一个项目中的网络请求会很多,此时封装:将实现相同功能的放在一起,后期找起来方便axiosaxios。
·
在日常应用过程中,一个项目中的网络请求会很多,此时一般采用的方案是将网络请求封装起来封装:将实现相同功能的放在一起,后期找起来方便
axios封装存放位置
axios的封装
// 新建js文件,作为工具,可以放在自建的utils文件夹下
// this.$axios({})
import axios from "axios"
import qs from "querystring"
//对响应状态码的统一处理
const errorHandle = (status, info) => {
switch (status) {
case 400:
console.log("语义有误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器拒绝访问");
break;
case 404:
console.log("地址有误");
break;
case 500:
console.log("服务器遇到意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
const instance = axios.create({
//网络请求时间:5秒 超过5秒则请求失败
timeout: 5000
//网路请求公共配置
})
//添加一个请求拦截器
axios.interceptors.request.use(config => {
//在请求之前做一些事
//发送post请求数据的统一处理
if (config.methods === "post") {
config.data = qs.stringify(config.data);
}
return config;
}, err => {
//请求错误的时候做一些事
return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(response => {
//对返回的数据做一些处理
return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
}, error => {
//对返回的错误做一些处理
const { response } = error;
errorHandle(response.status,response.info);
// return Promise.reject(error);
});
export default instance;
axios封装的使用方法
1.配置api
接口文件
api文件存放位置
(1)index.js
import axios from '../utils/request';
import path from './path'
const api={
//诚品地址
getChengPin(){
return axios.get(path.baseUrl + path.chengPin)
}
}
export default api;
(2)path.js
const base={
baseUrl:"http://iwenwiki.com",
chengPin:"/api/blueberrypai/getChengpinDetails.php"
}
export default base;//导出定义的base
2.在组件中使用axios
封装的内容
import api from "../api/index"//引入自定义的api文件
mounted(){//使用方法
api.getChengPin().then(res=>{
console.log(res.data);
})
}
测试接口文档合集: http://iwenwiki.com/1
- baseUrl:"http://iwenwiki.com/"
- chengPing:"/api/blueberrypai/getChengpinDetails.php"
总结:封装axios
,创建api
,在组件中使用api
更多推荐
已为社区贡献2条内容
所有评论(0)