Vue 的 axios二次封装

(以下的接口地址链接换成自己的写!!!)

首先在项目中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,
      }
    }
  }
})
相关推荐
逐·風1 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫2 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子3 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享4 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果4 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄4 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰5 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf6 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询