精华内容
下载资源
问答
  • vue axios 封装 全局调用axios
    千次阅读
    2020-03-10 20:10:05

    1.简单的封装了一下Axios 有其他的需求各位在自己拓展一下  与main.js同级创建新的.js命名为axios.config.js

    import axios from "axios"
    import qs from "qs"
    axios.defaults.timeout=3000   //响应时间
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
    axios.defaults.baseURL =process.env.NODE_HOST;   //配置接口地址
    console.log(process.env)
    //POST传参序列化(添加请求拦截器)
    axios.interceptors.request.use((config) => {
        //在发送请求之前做某件事
        let token = sessionStorage.getItem('access_token') || ""  //获取token 
        console.log(token)
        if (token!="") {
            config.headers = {
             'access-token': token,
             'Content-Type': 'application/x-www-form-urlencoded'
            }
        }    
        if(config.method  === 'post'){
            config.data = qs.stringify(config.data)//序列化post 参数
        }
        return config;
    },(error) =>{
        console.log('错误的传参')
      
        return Promise.reject(error);
    });
    //返回状态判断(添加响应拦截器)
    axios.interceptors.response.use((res) =>{
        //对响应数据做些事
        if(!res.data.success){
            let newToken=res.data.token    //成功后更新token 
            localStorage.setItem('access_token', newToken)
    
        }
        return res;
    }, (error) => {
          if(error.response.data.status=='401'){    //如果token 过期 则跳转到登录页面
            this.$router.push('/login');
          }
        return Promise.reject(error);
    });
    //返回一个Promise(发送post请求)
     function post(url, params) {
        return new Promise((resolve, reject) => {
            axios.post(url, params)
                .then(response => {
                    resolve(response);
                }, err => {
                    reject(err);
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }
    返回一个Promise(发送get请求)
     function get(url, param) {
        return new Promise((resolve, reject) => {
            axios.get(url, {params: param})
                .then(response => {
                    resolve(response)
                }, err => {
                    reject(err)
                })
                .catch((error) => {
                    reject(error)
                })
        })
    }
    export default {
        get,
        post,
    }

    2.在main.js中 调用一下vue 原型     

    import ajax from './axios.config'
    Vue.prototype.ajax=ajax

    3.接下来就可以在其他任意地方调用ajax.get ,post 来进行请求了

       methods:{
            listInfo(){
                let params={'username':"123"}
                this.ajax.post('/MagicData/?c=analysis_mymx&m=new_mxfl',params).then((res)=>{
                    console.log("123")
                }).catch(err=>{
                    console.log(err)
                })
            }
        },

     

    更多相关内容
  • 主要介绍了vueaxios使用封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 记录如何快速封装一个axios最简单的功能,然后全局挂载直接使用。 分三个简单的步骤: 前提:你下载了axios。如果没有下载的输入这个指令下载一下 npm install axios -s 第一步: 在utils文件夹内创建一个service....

    记录如何快速封装一个axios最简单的功能,然后全局挂载直接使用。

    分三个简单的步骤:
    前提:你下载了axios。如果没有下载的输入这个指令下载一下

    npm install axios -s
    

    第一步:

    在utils文件夹内创建一个service.js组件把这一堆代码直接复制进去。

    //axios实例封装
    
    import axios from "axios";
    //引入elementul的弹框提醒组件后面要用来报错
    import { Message } from 'element-ui';
    const service=axios.create({
        //基础路径URL配置
        baseURL:"http://localhost:8001",
        //五秒未响应提示
        timeout:5000,
    })
    
    
    //请求拦截
    service.interceptors.request.use(config => {
        config.headers['token'] = Vue.cookie.get('token') // 请求头带上token,一般后端的请求都要带上token才能成功的,没有token会被判断未登录,这里根据个人不同改获取token的方式。不需要的直接删掉这行代码就行,其他不动
        return config
      }, error => {
        return Promise.reject(error)
      })
      
    
    //响应拦截器
    service.interceptors.response.use((response)=>{
        //只返回config内的data的数据,其他的不展示
        const res=response.data
        return res
    },(error)=>{
        //如果请求出错会有弹框提示
            Message({
                type:"error",
                message:error.message
            })
            return Promise.reject(error)
    })
    
    export default service
    

    第二步:

    在utils中创建http.js组件把这代码复制进去。

    /****   http.js   ****/
    // 导入封装好的axios实例
    import service from './service'
    
    const http ={
        /**
         * methods: 请求
         * @param url 请求地址 
         * @param params 请求参数
         */
        get(url,params){
            const config = {
                method: 'get',
                url:url
            }
            if(params) config.params = params
            return service(config)
        },
        post(url,params){
            const config = {
                method: 'post',
                url:url
            }
            if(params) config.data = params
            return service(config)
        },
    }
    //导出
    export default http
    
    

    第三步:

    在main.js文件内引入
    这里是引入了封装后的请求,然后挂载到全局axios上,这样我们就可以直接this.$axios来发请求了

    //把axios实例化后引入main.js文件。挂载在axios原型链上全局使用。
    import http from "./utils/http";
    Vue.prototype.$axios = http
    

    最后:可以发请求了

    格式是一样的,就换个get和post就行了,很简单

    get请求

     this.$axios.get('/login', {
                username: 'admin',
                password: '123456',
            }).then(res => {
              console.log(res, '返回数据');
            }).catch(error => {
              console.log(error, '请求失败');
            })
    

    post请求

     this.$axios.post('/login', {
                username: 'admin',
                password: '123456',
            }).then(res => {
              console.log(res, '返回数据');
            }).catch(error => {
              console.log(error, '请求失败');
            })
    

    没有参数就不填第二个参数就行了

     this.$axios.post('/login').then(res => {
              console.log(res, '返回数据');
            }).catch(error => {
              console.log(error, '请求失败');
            })
    
    展开全文
  • 主要介绍了vue+axios全局添加请求头和参数操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 封装axios 第一步 1.src 目录中新建utils文件夹 2.utils文件中建立http.js文件 http.js文件的内容 //第一步导入axios import axios from 'axios' import { Toast } from 'vant'; //第二步 我们可以声明一个新的常量...

    封装axios

    第一步

    1.src 目录中新建utils文件夹
    2.utils文件中建立http.js文件
    

    http.js文件的内容

    //第一步导入axios
    import axios from 'axios'
    import { Toast } from 'vant';
    //第二步 我们可以声明一个新的常量axios 我们可以配置一些基础 公共的路径配置   比如说baseURL timeout请求失败超时报错 withcookies...之类的东西
    const service = axios.create({
        baseURL: process.env.VUE_APP_BASE_URL//如果配置了环境变量就可以直接写/api,
        withCredentials: true,
        timeout: 3000//请求超时
    })
    
    //第三步 设置请求拦截
    //新的常量axios service.拦截器.请求.使用===》 里头有两个参数 一个成功的回调函数  一个失败的回调函数
    service.interceptors.request.use(config=>{
        //每次发送请求要进行的公共操作  每次发送请求一般需要的操作一般都有 开启loading加载动画 token写在请求的头部 之类的
        //loading
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
          });
    
        //最后的话一定要给他return出去 不return不执行
        return config
    },err=>{
        //请求的时候如果发生错误了, 这边直接给它抛出错误就行
        // throw new Error(err)抛出的是一个红色的报错方便我们查看寻找
        throw new Error(err)
    
    })
    
    //第四步 设置响应拦截
    service.interceptors.response.use(response=>{
    //我们每次成功发送一个请求 它都会有响应的 参数也是两个
        //一般成功之后可以清除或关闭loading动画 还可以判断一些状态码
      //清除loading动画 
        Toast.clear()
        
        //判断状态码
        const res = response.data
        if (res.status && res.status !== 200) {
          // 登录超时,重新登录
          if (res.status === 401) {
            Toast.loading({
                message: '登录超时,请从新登录',
                forbidClick: true,
              });
          }
          return Promise.reject(res || 'error')
        } else {
          return res.data
        }
    
    },err=>{
        return Promise.reject(err)
    })
    
    
    //导出  导出这个模块
    export default service
    

    封装api 函数

    第一步先在utils文件夹中新建api.js

    api.js文件的内容

    //这边的话 先导入封装好的新的axios
    import service from './http';
    
    //然后我们可以封装一些接口函数 比如说 登录的 注册的 首页的 分类的 轮播的 //但是要确认参数传的是get还是post请求
    
    //首页
    export function getHome(data){
        return service.get('/home',data)
    }
    //方便我们后期的维护 代码美观 方便快捷
    //轮播
    export function lunbo(data){
        return service.get('/home/shejishi',data)
    }
    
    //比如说以后我们要维护封装好的接口 这样封装好后我们就不需要去组件里一个一个去找,直接来这个文件修改即可
    //组件化开模块化发或者开发 它们都有一个原则
    //高聚合 低耦合 
    //高聚合就是 一个组件的业务一定要聚合在一起 一个组件的业务越集中越好
    //低耦合就是 组件和组件之间的耦合度一定要低 意思就是两个组件之间的牵连越少越好
    
    
    
    
    
    
    展开全文
  • Vue 全局封装axios

    千次阅读 2018-09-18 11:51:38
    Vue 全局封装axios 开发过程中不需要在每个组件在引用axios插件 ajax函数封装 import axios from "axios"; axios.defaults.timeout = 5000;//设置超时时间,规定时间内没有响应则执行失败回调 function ...

    Vue 全局封装axios

    开发过程中不需要在每个组件在引用axios插件

    ajax函数封装

    import axios from "axios";
    axios.defaults.timeout = 5000;//设置超时时间,规定时间内没有响应则执行失败回调
    function ajax(obj){
      return new Promise((seccuss, error) =>{
        axios(obj).then((res) =>{
        //axios成功后根据api返回数据格式处理逻辑
          if(Number(res.data.code) === 200){
            seccuss(res.data)
          }else {
            
          }
        }).catch((e) =>{
          if (e.response) {
            console.log(e.config.url);
            console.log("错误码:"+e.response.status);
          } else if (e.request) {
            if(e.request.readyState === 4 && e.request.status === 0){
              //我在这里重新请求
              console.log(e.config.url);
              console.log("请求超时");
            }
          } else {
            console.log('Error', e.message);
          }
        })
      });
    }
    export default {
      install : (Vue, options) =>{
       Vue.prototype.$ajax = ajax
      }
    }
    

    main.js引用

    import extend from "./extend";
    Vue.use(extend);
    

    Vue 组件中全局使用

    this.$ajax({
    	url:"",
    	method:"",
    	....
    }).then(res=>{})
    
    展开全文
  • vue封装axios

    2022-01-08 09:32:42
    当我们使用vuecli做项目时,用到axios来调用后台数据,这个时候我们要对axios进行封装,方便维护 下载 npm instal --save -dev axios 1.src下新建request文件夹 2.config.js中 主要用来写请求的接口的域名 let ...
  • vue 封装axios详细教程

    2022-01-08 16:00:05
    首先安装: npm install axios --save 创建api文件,在下面创建config.js文件 ...Vue.prototype.axios = axios 每次请求方式是:this.axios.post/git 在config.js里写,如下: import axios from "axi..
  • Vueaxios全局封装

    2022-02-15 08:39:50
    axios封装 import axios from 'axios' import Qs from 'qs' import VueCookies from 'vue-cookies'; // const {set, get, isKey } = VueCookies // const AUTH_TOKEN = 1 const axiosInstance = axios.create({ ...
  • vue项目的前期配置 封装axios实例 封装API
  • Vue 封装全局axios

    2021-06-04 10:25:09
    安装引用 axios npm install --save -dev axios
  • 记录一下vue中对axios封装, 以便于日后复制粘贴用,没有用vuex 下边上代码: 根目录建一个request文件夹,建一个http.js文件 import axios from 'axios' // 引入axios // import store from '../store/index' // ...
  • vue axios封装和详细使用

    千次阅读 2020-07-06 21:01:29
    网络模块封装axios ajax i/o system ​ 使用自己已经封装好的模块,进行网络请求。假如第三方网络请求框架有一天,出现了不维护申明,那么对于项目来说就是很严重的问题。那么,开发中有啥网络请求选择呢?如下: ...
  • 接下来是封装axios的请求以及loading显示和隐藏 src/store/index.ts 使用vuex方便全局控制loading显示与隐藏 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ ...
  • Vue封装axios全局

    2021-12-27 19:36:02
    import axios from 'axios' import Vue from 'vue', axiso 封装 axios.defaults.baseURL = ...// axios 注册在Vue原型中,供所有组件使用 Vue.prototype.$axios=axios; export default axios
  • 虽然vueaxios使用已经十分方便,但是实际我们的日常操作中可能为了接口的规则一致,来创建一个统一管理的全局方法达到简化操作.而且在实际接口对接中,我们大多都需要对请求和响应进行拦截来进行token以及回调状态...
  • vue封装axios-很实用,很详细

    千次阅读 多人点赞 2021-07-07 13:50:51
    做项目最好就是封装好,全局使用,比较方便 话不多说,开始 首先vue 项目安装axios npm install axios 然后,新建一个http.js的文件 下面内容直接粘进去,里面有详细介绍 import axios from 'axios' //引入 import ...
  • vue3:axios封装使用

    千次阅读 2022-03-16 14:39:33
    2、封装axios.js //router import router from "../router/index.js"; //引入路由对象 import { Toast } from 'vant'; // 提示框 // axios import axios from 'axios' import qs from "qs"; import { baseURL } ...
  • 在utils文件夹创建... import axios from 'axios'; //构造Http类 class Http { constructor() { //axios默认配置 this.instance = axios.create({ baseURL: '/api', timeout: 60000, headers: { "Conten
  • vue封装axios请求

    2021-11-20 15:28:42
    import axios from 'axios';//引入axios文件 // 设置请求时间 axios.defaults.timeout = 60000; // 响应拦截器 axios.interceptors.response.use( res=>{ //配置拦截内容 比如用户是否登录 }) let baseURL = ...
  • vue项目中对axios全局封装

    千次阅读 2019-05-22 10:41:32
    项目中接口会很多,个人喜欢创建... axios.jsimport axios from 'axios'import router from '../router' //引入路由是为了做重定向,比如没有登录过期定向到登录页面 // 创建axios实例 const instance = axios.crea...
  • vue3如何封装axios

    2021-12-21 16:39:14
    1.下载axios npm install axios -S 2.下载 qs npm install qs -S 3.然后可以在文件夹下面创建相应的axios的文件比如index 4.然后配置 import axios from "axios"; import qs from "qs"; // axios.defaults...
  • 主要给大家介绍了关于vueAxios封装与API接口的管理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue3全局使用axios

    千次阅读 2021-01-27 15:41:09
    Vue3全局使用axios1.安装axios2.引入axios3.使用axios 1.安装axios npm install axios -S 2.引入axios // main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' ...
  • npm install axios 其次 在src目录下新建一个utils文件夹,我们的一些封装工具都可以放在这。 然后在utils文件夹下新建一个request.js文件,将aixos请求的封装写到里面: import axios from 'axios' import Qs from...
  • 2022年2月三日,初三,又是家里蹲的一天,更篇博客吧。...首先使用npm安装axios npm install axios -S 然后在我们的js文件内import引入 import axios from 'axios' 这里面我们就可以对axios写一个默认的链接 let myA
  • vue3.0 axios封装

    2021-05-06 11:17:24
    在src下创建plugins文件夹,创建cookie.ts,封装js-cookie import Cookies from 'js-cookie'; const TokenKey = 'token' const RefreshTokenKey = 'refresh-token' export function getToken() { return Cookies...
  • vueaxios封装使用

    千次阅读 多人点赞 2021-03-01 15:52:38
    vue axios封装使用 vue安装axios npm install axios -S 或者 npm i axios -S 在main.js进行全局引入 import axios from 'axios' Vue.prototype.$axios = axios //将axios绑定到vue的原型上 在api...
  • 主要给大家介绍了关于vueaxios请求封装的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,450
精华内容 4,180
关键字:

vue封装axios全局使用