1.首先在项目上装上
npm install axios //请求
npm install qs //转义
2.在src文件夹目录下创建api文件夹（api是名称，看个人取）
3.然后创建http.js文件 如图：
4.在http.js文件里直接上代码了
import axios from "axios";
import qs from "qs"
/**
* 根据环境变量区分接口的默认地址
*/
switch(process.env.NODE_ENV){
case "production": //生产环境
axios.defaults.baseURL = "http://api.com" //这些都是随便写的
break;
case "test": //测试环境
axios.defaults.baseURL = "http://127.0.0.1:8080" //这些都是随便写的
break;
default: //默认环境
axios.defaults.baseURL = "http://127.0.0.1:3000"; //这些都是随便写的
}
/**
* 设置超时时间和跨域是否允许携带凭证
*/
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true
/**
* 设置请求头 传递数据的格式(看服务器要求什么格式,有些是json格式)
* x-www-form-urlencoded
* ?xxx=xxx&aaa=aaa
*/
axios.defaults.headers["content-Type"] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data=> qs.stringify(data);
/**
* 设置请求拦截器
* 过程:
* 客户端发送请求 -> 请求拦截器 ->服务器
* token校验(JWT) 接受服务返回的token,存到vuex/本地存储中,
* 每一次向服务器发请求,我们应该把token带上
*/
axios.interceptors.request.use((config)=>{
//携带上token
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token)
return config;
},error=>{
return Promise.reject(error);
});
/**
* 响应拦截器
* 过程
* 服务器返回学习 -> 响应拦截 -> 客户端JS获取到信息
*
*/
axios.interceptors.response.use(response=>{
return response.data;
},error=>{
// return Promise.reject(error)
let {
response} = error;
if(response){
// => 服务器最起码返回结果了
switch(response.status){
case 401: //权限
break;
case 403: //服务器拒绝执行(token过去)
break;
case 404://找不到页面
break
}
}else{
// =>服务器连结果都没有返回 //没有网
if(!window.navigator.onLine){
// 断网处理:可以跳转到断网的页面 router
return;
}
return Promise.reject(error);
}
})
export default axios; //
说明一下这一块
/**
* 根据环境变量区分接口的默认地址
*/
switch(process.env.NODE_ENV){
case "production": //生产环境
axios.defaults.baseURL = "http://api.com" //这些都是随便写的
break;
case "test": //测试环境
axios.defaults.baseURL = "http://127.0.0.1:8080" //这些都是随便写的
break;
default: //默认环境
axios.defaults.baseURL = "http://127.0.0.1:3000"; //这些都是随便写的
}
这一块是根据启动的时候改变或者打包的时候把IP和端口改变
具体配置在
package.json文件中：
"scripts": {
"serve": "vue-cli-service serve",
"server:text":"set NODE_ENV=test&&vue-cli-service serve",
"server:production":"set NODE_ENV=production&&vue-cli-service serve",
"build": "vue-cli-service build"
},
如果我在cmd 跑 npm run server:text的话，IP和端口为：http://127.0.0.1:8080
以上就是axios请求封装好了，
具体实现接口管理为：
5.在src/api文件夹里头创建api.js文件来管理模块，路径图示：
api.js具体代码为：
/**
* 这里数据请求的唯一入口
*/
import index from './module/index'
import user from './module/user'
export default{
index,
user
}
然后在api文件夹中创建一个module文件夹管理各个模块：
module/index.js内容为：
import axiosHttp from '../http'
function login(){
return axiosHttp.post('/login') //这里的 '/login' 是具体的接口后面的名称 例如:http://127.0.0.1/api/login
}
export default{
login
}
module/user.js内容为：
import axiosHttp from '../http'
function userInfo(){
return axiosHttp.post('/userInfo') //这里的 '/userInfo' 是具体的接口后面的名称 例如:http://127.0.0.1/api/userInfo
}
export default{
userInfo
}
最后把模块话的文件抛出去给mian.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import api from './api/api' //主要是这块 主要是这块 主要是这块
Vue.config.productionTip = false
Vue.prototype.$api = api; //主要是这块 主要是这块 主要是这块
new Vue({
router,
store,
render: function (h) {
return h(App) }
}).$mount('#app')
然后在其他vue组件随便写个按钮事件触发一下对应的api
<button @click="getUserInfoFn">测试接口1</button>
methods:{
getUserInfoFn(){
this.$api.user.userInfo()
}
}
6.运行启动查看IP和端口号：
进入该项目的文件夹中：npm run server:text 启动
点击按钮查看
完。
如有错误，请指点。谢谢，喜欢的就收藏，谢谢。