菜鸡随笔之aixos篇(一)
简单记录axios配置。
1、npm安装
npm install axios -S
在main.js中注册:
import axios from "axios";
Vue.prototype.$axios = axios;
2、文件创建
(1)utils/request.js。环境变量配置
(2).env.development 开发环境
(3).env.production 生产环境
(4)api/xx.js 封装请求
3、各部分介绍(代码及功能记录)
(1)utils/request.js。环境变量配置
import axios from "axios";
// 创建了axios实例, 使用的是自己的配置项
const service = axios.create({
// 开发环境, 找 env.development, 找 VUE_APP_BASE_API 变量
// 生产环境, 找 env.production, 找 VUE_APP_BASE_API 变量
baseURL: process.env.VUE_APP_BASE_API, // 环境变量
timeout: 5000 // request timeout
});
// 请求拦截器
// 响应拦截器
export default service;
ps:暂不考虑拦截器
(2).env.development: 开发环境,用于 npm run serve ,在开发过程中会引用这个文件里面的配置;
VUE_APP_BASE_API = '需要用的api' //ip地址,例 :http://192.168.x.x:8080
(3).env.production : 生产环境,用于 npm run build,打包时会引用这个文件里面的配置,即用于线上环境;
VUE_APP_BASE_API = '需要用的api' //ip地址,例 :http://192.168.x.x:8080
(4)调用Axios获取数据
第一种:api/xx.js 封装请求
import request from "@/utils/request";
export function firstApi(data) {
return request({
method: "post",
url: "接口URL",
data,
});
}
调用
import { firstApi } from "@/api/fristApi";
firstApi().then((res) => {
console.log(res);
});
第二种:直接使用
this.$axios
.post("接口URL")
.then((res) => {
console.log(res);
});
未完待续.........(?)
新手理解,若有误,请各位大佬指点,Thanks♪(・ω・)ノ