首页 > 其他分享 >vue封装axios的方式(二)

vue封装axios的方式(二)

时间:2023-06-17 17:11:52浏览次数:21  
标签:function axios return res request vue 封装 post

vue封装axios的方式(二)

创建utils\request.js

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'  //导入element-ui组件库
 
// 创建axios的对象
const instance = axios.create({
    baseURL: "https://api.cat-shop.penkuoer.com",  //配置固定域名
    timeout: 5000
})
 
// 请求拦截
// 所有的网络请求都会走这个方法,可以在请求添加自定义内容
instance.interceptors.request.use(
    function (config) {
        config.headers.token = '123456' // 请求头添加token值
        config.headers.info = 'lxy'  //请求头添加info值
        return config
    },
    function (err) {
        return Promise.request(err)
    }
)
 
// 响应拦截
// 此处可以根据服务器返回的状态码做相应的数据
instance.interceptors.response.use(
    function (response) {
        const res = response
        if (res.status === 500) {
            MessageBox.alert('系统未登录,请重新登录', '错误', {
                confirmButtonText: '确定',
                type: 'error'
            }).then(() => {
                store.dispatch('FedLogOut').then(() => {
                    location.reload()
                })
            })
            return Promise.reject('error')
        } else if (res.errno === 502) {
            MessageBox.alert('系统内部错误,请联系管理员维护', '错误', {
                confirmButtonText: '确定',
                type: 'error'
            })
            return Promise.reject('error')
        }
    },
    function (err) {
        return Promise.request(err)
    }
)
 
// 封装get和post请求
export function get(url, params) {
    return instance.get(url, {params})
}
 
export function post(url, data) {
    return instance.post(url, data)
}
 
export default instance;

在src目录下新建api文件夹,在api文件夹中新建index.js用于存放请求接口,也可以根据业务创建多个js文件。

import request from "@/utils/request";  //导入封装请求的js文件
 
export function products(params) {
  return request({
    url: "/api/v1/products",  //接口路径
    method: "get",  //接口方法
    headers: { 'Content-Type': 'multipart/form-data' }, //给接口添加请求头
    params  //接口参数
  });
}
 
export function login(data) {
  return request({
    url: "/api/v1/auth/login",
    method: "post",
    data,
    // post请求接口后面拼接参数
    params: {
      currentOpenId: 'currentOpenId',
      currentCompanyOpenId: 'currentCompanyOpenId'
    }
  });
}

页面调用接口

<template>
  <div>
    <button @click="get()">封装的get</button>
    <button @click="post()">post</button>
  </div>
</template>
 
<script>
import {products,login} from "@/api/index"  //导入api目录下的接口文件,并在{}中写使用的接口
export default {
  methods: {
    get(){
      products({name:"lxy",age:18,date: new Date().getTime()}).then(res => {
        console.log('res',res.data);
      })
    },
    post(){
      let obj = {
        name:'lxy',
        age:18
      }
      login(obj).then(res => {
        console.log('res',res.data);
      })
    }
  },
};
</script>

标签:function,axios,return,res,request,vue,封装,post
From: https://www.cnblogs.com/Cxymds/p/17487731.html

相关文章

  • vue封装axios的方式(三)
    vue封装axios的方式(三)与第二种封装基本相同,不同之处在于api的处理格式//引入axiosimportaxiosfrom'axios'//引入qs模块,对数据进行序列化importQSfrom'qs'//引入message模块,toast提示import{message}from'ant-design-vue'//引入storage模块,操作tokenimport......
  • vue-json-viewer 展示json数据
    vue-json-viewer展示json数据当项目需要再网页中展示原始的json数据的时候,我们期望能够对json进行格式化展示,并且能够进行展开和折叠。vue-json-viewer可以帮助我们实现这样的功能。1.安装$npminstallvue-json-viewer@2--save//Vue2$npminstallvue-json-viewer@3-......
  • 解决vue2中methods写的方法无法使用箭头函数
    1.情况:在method写递归函数,函数内使用了this.变量,报错变量为undefined,原因是function内this指向改变,因改写为箭头函数,使其this不被改变,但是methods内又无法写箭头函数 2.解决:使用var获取this,供函数内使用 ......
  • 使用Docker将Vite Vue项目部署到Nginx二级目录
    Vue项目配置使用Vite创建一个Vue项目,点我查看如何创建配置打包路径在Nginx中如果是二级目录,例如/web时,需要设置线上的打包路径在项目跟路径下创建两个文件:.env.production、.env.development,写入一下内容:##生产环境NODE_ENV='production'VITE_BASE_PATH=/form-design......
  • vue3Props
    一、Props声明一个组件需要显式声明它所接受的props,这样Vue才能知道外部传入的哪些是props,哪些是透传 attribute在使用SFC时,props可以使用defineProps()宏来声明:如子组件中(1)constprops=defineProps(['foo'])(2)constprops=defineProps({ title:String, age......
  • VUE
    vue//注册全局组件//importTitleHeaderfrom'@/vcomponent/TitleHeader'//Vue.component(TitleHeader)//Vue.component("TitleHeader",TitleHeader)auto-complete="new-password"--密码不自动添加:close-on-click-modal="false"--el-dialog......
  • 前端Vue仿滴滴打车百度地图定位查找附近出租车或门店信息(更新版)
    前端vue仿滴滴打车百度地图定位查找附近出租车或门店信息, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12982效果图如下:使用方法<!--官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/base-->#安装vue-baidu-map插......
  • TienChin 开篇-运行 RuoYiVue
    开篇目的:让大家随心所欲的DIY若依的脚手架不会涉及到太多基础知识踊跃提问(不懂得地方大家提问我会根据提问,后续一一解答疑惑)下载RuoYiVueGitee:https://gitee.com/y_project/RuoYi-Vue下载完毕之后,这个项目当中存在一个ruoyi-ui这个是前端,只是放在了这个项目当中方便我们进......
  • 面向对象-封装
    面向对象的封装是一种面向对象编程的核心概念,它指的是将数据和对数据的操作封装在一个类中,通过类的访问权限控制,隐藏内部实现细节,提供公共接口供其他对象访问。封装的目的是实现数据的安全性和灵活性。通过将数据和操作数据的方法封装在一起,可以隐藏实现细节,防止外部直接访问和修......
  • Vue.js 组件通信
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......