1、在src目录下建network文件用于配置axios`。
2、在network里面先建一个config.js文件
export const GET="get"; //定义并导出GET请求 export const POST="post"; //定义并导出POST请求 export const path={ //定义路由对象并抛出 list:"/small4/user/detail", //定义路由(多级路由与core中axios中的路由拼接),调用谁拼接谁 }
3、在network中建一个core.js文件
import {GET,POST} from "./config"; //导入config import axios from "axios"; //安装axios并引入 const instance =axios.create({ //创建一个拥有通用配置(如:路由等)axios实例 baseURL:"https://api.it120.cc" //通用路由与config里的多级路由拼接 }); exportfunction request(method,url,params){ //封装一个函数并导出,类似于this.$axios.get(url,{}) switch(method){ //switch语句判断是get还是poat请求 case GET: //如果是get就调用下面封装的get请求并返回 return get(url,params) case POST: //post return post(url,params) } }; functionget(url,params){ //封装get请求 return instance.get(url,params) //调用上面axios实例并return返回 }; function post(url,params){ //封装post请求 return instance.get(url,params) };
4、在network中建一个index.js文件
import {request} from "./core" //导入core import {GET,POST,path} from './config' //导入config const network={ //声明一个对象 getStoreList(params){return request(GET,path.list,params)} //自定义事件名 调用core中的request函数发送get请求,path.list是调用config里的多级路由 } export default network //抛出network对象 在main.js里接收全局引入
5、在main.js里接收全局引入
import network from './network/index' //全局引入在那都能调用 Vue.prototype.$network=network
6、之后就可以在组件中调用了
mounted() { this.$network //调用network中的getStoreList({参数--用于传给params}) .getStoreList({ page: 1, pageSize: 2 }) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); }