配置 axios

为了方便对 axios 操作，我们通常对 axios 进行二次封装。

1. 配置 axios 基本信息
   建立 src/ api / index.js 文件并配置axios
   import axios from "axios";
   import { Message } from "element-ui";
   import router from "@/router";
   import qs from 'qs';
   import store from '@/store';
   import { setStore } from '@/utils/store';

// 创建axios实例
const service = axios.create({
// api的base_url
// baseURL: process.env.VUE_APP_URL, // 本地-后端解决跨域后
baseURL: process.env.NODE_ENV === "dev" ? "/api" : process.env.VUE_APP_URL, // 本地-前端解决跨域
timeout: 15000 // 请求超时时间
});

// request 请求拦截器
service.interceptors.request.use(
config => {
//设置header
config.headers["Content-Type"] = "application/json;charset=UTF-8";

// 格式化 get 请求
if (config.method === 'get' && config.data) {
  config.url = `${config.url}?${qs.stringify(config.data, { indices: false })}`
  config.headers["Content-Type"] = "application/x-www-form-urlencoded";

}
// 让每个请求携带自定义token 
if (store.getters.token) {
  // header添加token
  config.headers["Authorization"] = store.getters.token;
}
return config;

},
error => {
return Promise.reject(error);
}
);
// respone 响应拦截器
service.interceptors.response.use(
response => {
return response;
},
error => {
if (error.response.status == 400) {
Message({
message: "参数信息有误",
center: true
});
return;
} else if (error.response.status == 302) {
Message({
message: "用户未登录",
center: true
});
router.push("/login");
setStore({ name: 'TOKEN', content: '', type: 'session' })
return;
} else if (error.response.status == 404) {
Message({
message: "连接失败",
center: true
});
return;
} else if (error.response.status == 500) {
Message({
message: "服务器内部错误",
center: true
});
return;
} else if (error.response.status == 560) {
Message({
message: "数据库异常",
center: true
});
return;
}
Message({
message: error.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(error);
}
);

export default service;

2. 封装 axios 函数
   例如： src/ api / user / user.js 文件，单独建立文件夹，方便统一管理，同时在开发时，避免git提交时的冲突

import axios from '../index'

// 请求函数
export function getUser (req) {
return axios({
method: "post",
url: "/user/getInfo",
data: req
})
}
3. 使用函数
import { getUser } from '@/api/user/user.js'

methods:{
getUser(data)
.then(res=>{})
.catch(error=>{})
.finally(()=>{})
}
4. 并发请求
例如：根据函数1和函数2返回数据的 id 和 phone，作为函数3的入参，去查询用户数据

import { getUser, getPhone, getUserId } from '@/api/user/user.js'

mounted() {
axios.all([getUserId (), getPhone ()])
.then(axios.spread(function(userId, phone) {
console.log('请求1结果', userId)
console.log('请求2结果', phone)
let params = {
phone: phone,
id: userId
}
getUser(params ).then(res=>{})
}))
},
15人点赞
axios

作者：zhudying
链接：https://www.jianshu.com/p/471a60366579
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。