第一步：在目录夹里面建立一个utils文件夹里创建一个request.js文件写入：
import axios from "axios";
// 创建axios实例
const service = axios.create({
baseURL: "http://192.168.1.1", // api的base_url
timeout: 5000 // 请求超时时间
});
第二步：在vue.config.js中配置：
devServer: {
port: 80, //端口号
open: true, //自动启动浏览
proxy: {
"/api": {
target: "http://192.168.1.1", // target host
ws: true, // proxy websockets
changeOrigin: true, // needed for virtual hosted sites
pathRewrite: {
"^/api": "" // rewrite path
}
}
}
}
},
第三步：创建api目录 xxx.js
import request from "@/utils/request";
export function picPage(params) {
return request({
url: "/pub/xxx",
method: "get",
params
});
}
import request from "@/utils/request";
export function loginList(phone, pwd) {
return request({
url: "/pub/login",
method: "post",
data() {
phone, pwd;
}
});
}
第四步：调用封装axios
1.导入封装的api.js
import {xxx} from '@/api/xxx'
2.传参
params传参
xxx({key:value}).then(res=>{
//这里写业务逻辑
.catch(function(error) {
window.console.log(error);
});
})
data传参
image.png
