(以下的接口地址链接换成自己的写!!!)
首先在项目中src的目录下创建一个api的文件夹,在api的文件下在穿件两个文件用于二次封装
别忘了先安装axios:(在根目录下安装axios,如果安装过了,就不用看蓝色字体安装过程)
javascript
npm install --save axios
然后在main.js中引用axios:
javascript
// 引入axios
import {apiGet,apiPost} from './api/api'
Vue.prototype.$apiGet = apiGet
Vue.prototype.$apiPost = apiPost
api下的第一个api.js:
javascript
import axios from 'axios';
axios.defaults.timeout = 30000;
// 这个是环境测试配置,不知道可以搜索我的csdn中的Vue测试打包test
axios.defaults.baseURL = process.env.VUE_APP_API_URL
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
//可以写if判断,提前拦截错误信息
return response;
}, function (err) {
return Promise.reject(err);
});
export function apiGet(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params,
headers:{"token":sessionStorage.getItem('token')}
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});
}
export function apiPost(url, params){
return new Promise((resolve, reject) => {
axios({
method: 'post',
url:url,
data:params
}).then(res => {
resolve(res.data);
}).catch(err =>{reject(err.data)})
});
}
api下的第二个https.js:
javascript
//这个是二次封装(用到apiPost的时候把下面接口那也改成这个,用不到就把apiPost去掉)
import {apiGet,apiPost} from "./api";
export function jindutiao(){
return new Promise((resolve)=>{
apiGet("/index.php/index/admin/getNum").then(res=>{
resolve(res)
})
});
// .catch(err=>{
// reject(err)
// })
}
然后按照("jindutiao().这个是https.js中二次封装中你取的函数名字")
先引用:import {jindutiao} from "../api/https"
在使用:jindutiao().then(res=>{
console.log(res);
})
二次封装在页面上的使用以上说的以下示例代码,在script中:
javascript
// 这个是二次封装后https.js中封装后直接写函数在这个页面使用
import {jindutiao} from "../api/https"
export default {
data() {
return {
};
},
mounted() {
// 这个是进度条接口
jindutiao().then(res=>{
// console.log(res);
this.percentage = res.data.cssnum;
this.percentage1 = res.data.htmlnum;
this.percentage2 = res.data.jsnum;
this.percentage3 = res.data.vuenum;
}),
},
methods: {
}
}
</script>
如果有跨域问题可以在最后在vue.config.js中添加以下代码解决用注释下面的:
javascript
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
publicPath:'./',
transpileDependencies: true,
lintOnSave:false,
// 跨域问题
devServer: {
proxy:{
'/api1':{
target:'http://47.94.4.201/',
pathRewrite:{'^/api1':''},
ws:true,
changeOrigin:true,
}
}
}
})