精华内容
下载资源
问答
  • 主要介绍了Vue Promise的axios请求封装详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Axios请求封装

    2019-12-16 09:30:29
    封装了一个axios请求的方法

    重新学习了一下axios,封装一个axios请求的方法

    import axios from 'axios';
    export function axiosPost(urI,data,cb){//地址,传递参数,回调
      let url,req,callback;
      if (arguments.length < 2 || arguments.length > 3) return;
      if (arguments.length === 2) {
        url = urI;
        req = null;
        callback = cb;
      }else{
        url = urI;
        req = data;
        callback = cb;
      };
      axios.post(url,//这里在url前面拼接ip地址+端口号或者直接把地址加端口号当url传进来
        req
      ).then(res => {
        callback(res);
      }).catch(err => {
        console.log(err);
      })
    }
    
    展开全文
  • axios请求封装

    2021-09-06 17:56:17
    vue axios封装: 1、项目环境分为三种: 开发环境 测试环境 线上环境 2、基础用法: 安装axios 在页面中引入 import axios form 'axios" get请求axios.get("http://www.baidu.com",params:{pageNum:1,pageSize:...

    vue axios封装:
    1、项目环境分为三种:
    开发环境
    测试环境
    线上环境

    2、基础用法
    安装axios
    在页面中引入 import axios form 'axios"
    get请求:

      axios.get("http://www.baidu.com",params:{pageNum:1,pageSize:10},header:{}).catch(error=>{console.log(error)})
    

    最终生成的url:http://www.baidu.com/api?pageSize=10&pageNum=1
    参数1:url 请求地址
    参数2:传参
    参数3:请求头

    post 请求:

    axios.post('http:www.baodu.com/api/login',{userName:'xiaoming',password:'1111'},{params:{a:123,b:'haha'}}).then(res=>{console.log(res)})```
    

    put请求
    axios.put()

    delete请求:
    axios.delete()

    封装:
    在src中创建文件夹 :Utils->request.js

    import axios from 'axios'
    //创建一个axios对象
    const instance = axios.create({
    //baseUrl:会在发送请求的参数前面
    	baseUrl='http://www.baidu.com',
    	timeout:'5000'
    })
    
    //请求拦截
    //所有的网络请求之前都会先执行此方法
    instance.interceptors.request.use(
    	function(config){
    		config.headers.token='12345'  //token:是服务端约的好的,后端需要啥写啥
    		return config
    	}
    	function(error){
    		return Promise.reject(error)
    	}
    )
    
    //响应拦截
    //所有的网络请求返回数据之后都会先执行此方法
    //此处可以根据服务器的返回的状态码做相应的处理:例如:404、401、500等
    instance.interceptors.response.use(
    	function(response){
    		return response
    	}
    	function(error){
    		return Promise.reject(error)
    	}
    )
    
    
    //get请求
    export function get(url,params){
    	return axios.get(rul,{params});
    }
    
    //post请求
    export function post(url,data){
    	return axios.post(url,data);
    }
    
    //put请求
    export function put(url,data){
    	return axios.put (url,data)
    }
    
    //delete 请求
    export function del(url){
    	return axios.delete(url);
    }
    

    在没有创建axios对象之前 页面中使用方式:

    import {get} form '../Utils/request.js'
    get('http://www.baidu.com/api/login',{params:{}).then(res=>{})
    

    在创建axios创建对象以后使用方式:

    import {get} form '../Utils/request.js'
    get('/api/login',{params:{}).then(res=>{})
    
    展开全文
  • 企业级axios请求封装

    2020-04-04 11:09:56
    整理一个基于axios请求封装 首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并将这个实例导出。代码如下,注释都写在里面啦 import Vue from 'vue' import axios from 'axios...

    整理一个基于axios请求封装

    首先是request.js,这个文件是用来处理axios的配置、设置拦截器等等,它创建了一个实例,并将这个实例导出。代码如下.

    import Vue from 'vue'
    import axios from 'axios'
    // 创建 axios 实例
    const service = axios.create({
      baseURL: '/user', // 基础地址
      timeout: 6000 // 请求超时时间
    })
    
    /**
     * 请求拦截器,携带每个请求的token(可选) 
     */
    service.interceptors.request.use(config => {
      const token = Vue.ls.get("ACCESS_TOKEN") //token是放在vuex中的state中
      if (token) {
        config.headers['X-Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
      }
      if (config.method == 'get') {
        config.params = {
          _t: Date.parse(new Date()) / 1000, //让每个请求都携带一个不同的时间参数,防止浏览器缓存不发送请求
          ...config.params
        }
      }
      return config
    }, (error) => {
      return Promise.reject(error)
    })
    
    /**
     * 响应拦截器中的error错误处理
     */
    const err = (error) => {
      if (error.response) {
        switch (error.response.status) {
          case 401:
            console.log({
              message: '系统提示',
              description: '未授权,请重新登录',
              duration: 4
            })
            break
          case 403:
            console.log({
              message: '系统提示',
              description: '拒绝访问'
            })
            break
    
          case 404:
            console.log({
              message: '系统提示',
              description: '很抱歉,资源未找到!',
              duration: 4
            })
            break
          case 500:
            console.log({
              message: '系统提示',
              description: 'Token失效,请重新登录!'
            })
            break
          case 504:
            console.log({
              message: '系统提示',
              description: '网络超时'
            })
            break
          default:
            console.log({
              message: '系统提示',
              description: error.response.data.message,
            })
            break
        }
      }
      return Promise.reject(error)
    };
    
    /**
     * 响应拦截器,将响应中的token取出,放到state中
     */
    service.interceptors.response.use((response) => {
      const token = response.headers["authorization"]
      if (token) {
        Vue.ls.set("ACCESS_TOKEN", token) //token是放在vuex中的state中
      }
      return response.data
    }, err)
    
    export {
      service as axios
    }
    
    

    第二个便是manage.js,这个文件主要是书写不同的http请求,get、post等,在请求中配置某些特殊的配置

    import { axios } from './request'
    
    //get
    export function getAction(url,params) {
      return axios({
        url: url,
        method: 'get',
        params: params
      })
    }
    //post
    export function postAction(url,data) {
      return axios({
        url: url,
        method:'post' ,
        data: data
      })
    }
    
    //put
    export function putAction(url,data) {
      return axios({
        url: url,
        method:'put',
        data: data
      })
    }
    
    //deleteAction
    export function deleteAction(url,params) {
      return axios({
        url: url,
        method: 'delete',
        params: params
      })
    }
    
    /**
     * 下载文件
     * @param {*} url: 请求地址
     * @param {*} params: 请求参数
     */
    export function downFileAction(url,params){
      return axios({
        url: url,
        params: params,
        method:'get' ,
        responseType: 'blob'
      })
    }
    /**
     * 用于上传文件
     * @param {*} url:请求地址
     * @param {*} data:请求体数据
     */
    export function fileUploadAction(url,data){
      return axios({
        url: url,
        data: data,
        method:'post' ,
        headers:{
          'Content-Type':'multipart/form-data'
        },
        timeout:1000*60*4  //上传时间4分钟
      })
    }
    
    

    最后这个api.js文件就是我们需要写的接口了,把接口都写在一个文件中,也是为了方便我们维护,在使用的时候,导入使用便可

    import { getAction,deleteAction,putAction,postAction,downFileAction,fileUploadAction} from '@/api/manage'
    
    const getTest = (params)=>getAction("/api/user/get",params);
    const deleteActionTest = (params)=>deleteAction("/api/user/delete",params);
    const putActionTest = (params)=>putAction("/api/user/put",params);
    const postActionTest = (params)=>postAction("/api/user/post",params);
    const downFileActionTest = (params)=>downFileAction("/api/user/downfile",params);
    const fileUploadActionTest = (params)=>fileUploadAction("/api/user/fileupload",params);
    
    
    export {
      getTest,
      deleteActionTest,
      putActionTest,
      postActionTest,
      downFileActionTest,
      fileUploadActionTest
    }
    
    

    附带一个项目中用到的文件下载链接处理

    axios.get("/api/excel",{id:'001'}).then(res=>{//返回的数据是二进制文件流
        var blob = new Blob([res],{type: 'application/force-download;charset=utf-8'});
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = 'name.xls'; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象 
      })
    
    展开全文
  • vue axios请求封装

    千次阅读 2020-12-23 17:34:24
    vue api请求统一管理,封装 不废话直接上demo(打卡:2020-12-23 ) 一、安装axios cnpm install axios 二、目录结构he代码 user.js import base from '../base'; // 导入接口域名列表 import request from '.....

    vue api请求统一管理,封装

    不废话直接上demo

    一、安装axios

    cnpm install axios 
    

    二、目录结构he代码

    在这里插入图片描述

    user.js

    	import base from '../base'; // 导入接口域名列表
    	import request from '../http'; // 导入http中创建的axios实例
    	
    	const user = {
    	  //普通json请求
    	  test1(url, params) {
    	    return request.post(`${base.BASE_URl}${url}`, params)
    	  },
    	  //普通json请求,请求URL统一管理
    	  test2(params) {
    	    return request.post(`${base.BASE_URl}${'post'}`, params)
    	  },
    	  //FormData 表单请求
    	  test3(params) {
    	    var form = new FormData();
    	    form.append("requestSystem", "");
    	    form.append("requestUri", "/post");
    	    form.append('requestData[page]', params.page);
    	    form.append('requestData[size]', params.size);
    	    return request.post(`${base.BASE_URl}`, form)
    	  }
    	};
    	export default user;
    

    base.js

    	**
    	 * 接口域名的管理
    	 */
    	const base = {
    	  // 配置跨域
    	  // BASE_URl: '/api',
    	  // 测试环境
    	  BASE_URl: 'http://httpbin.org/',
    	  // 正式环境
    	  // BASE_UR: 'https://xxx.com'
    	};
    	export default base;
    
    

    http.js

    	import axios from 'axios';
    	import router from '../router';
    	import store from '../store/index';
    	import {
    	  Message,
    	  Loading
    	} from 'element-ui';
    	
    	const toLogin = () => {
    	  router.replace({
    	    path: '/login',
    	    query: {
    	      redirect: router.currentRoute.fullPath
    	    }
    	  });
    	}
    	
    	// 全局加载
    	let loadingNum = 0,
    	  loading;
    	
    	function startLoading() {
    	  if (loadingNum == 0) {
    	    loading = Loading.service({
    	      lock: true,
    	      text: "拼命加载中...",
    	      spinner: "el-icon-loading",
    	      background: "rgba(0, 0, 0, 0.7)"
    	    });
    	  }
    	  loadingNum++;
    	}
    	
    	function endLoading() {
    	  loadingNum--;
    	  if (loadingNum <= 0) {
    	    loading.close();
    	  }
    	}
    	
    	
    	
    	const errorHandle = (status, other) => {
    	  // 状态码判断
    	  switch (status) {
    	    // 401: 未登录状态,跳转登录页
    	    case 401:
    	      toLogin();
    	      break;
    	      // 403 token过期
    	      // 清除token并跳转登录页
    	    case 403:
    	      Message.error('登录过期,请重新登录');
    	      localStorage.removeItem('token');
    	      // store.commit('loginSuccess', null);
    	      setTimeout(() => {
    	        toLogin();
    	      }, 1000);
    	      break;
    	      // 404请求不存在
    	    case 404:
    	      Message.error('请求的资源不存在');
    	      break;
    	    case 405:
    	      Message.error('请求405');
    	      break;
    	    default:
    	      Message(other);
    	  }
    	}
    	// 创建axios实例
    	var instance = axios.create({
    	  timeout: 1000 * 10
    	});
    	// 设置post请求头
    	axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
    	
    	instance.interceptors.request.use(
    	  config => {
    	    startLoading()
    	    // 这里添加请求头信息
    	    // config.headers['token'] = store.getters.token
    	    return config;
    	  },
    	  error => Promise.error(error))
    	
    	// 响应拦截器
    	instance.interceptors.response.use(
    	  // 请求成功
    	  res => {
    	    endLoading()
    	    // if (res.status == 200) {
    	    return Promise.resolve(res.data)
    	    // } else {
    	    //   return Promise.reject(res.data)
    	    // }
    	  },
    	  // 请求失败
    	  error => {
    	    const {
    	      response
    	    } = error;
    	    endLoading()
    	    if (response) {
    	      // 请求已发出,但是不在2xx的范围 
    	      errorHandle(response.status, response.data.message);
    	      return Promise.reject(response);
    	    } else {
    	      // 处理断网的情况
    	      if (!window.navigator.onLine) {
    	        console.log('网络异常')
    	      } else {
    	        console.log(222)
    	        return Promise.reject(error);
    	      }
    	    }
    	  });
    	
    	export default instance;
    

    index.js

    	import user from './api/user'
    	export default {
    	  user
    	}
    
    

    三、main.js 引用

    	import http from './http/index';
    	Vue.prototype.$http = http;
    

    四、使用

    	<template>
    	  <div>
    	    <el-button @click="test1">json请求1</el-button>
    	    <el-button @click="test2">json请求2</el-button>
    	    <!-- <el-button @click="test3">json请求3</el-button> -->
    	  </div>
    	</template>
    	
    	<script>
    	import { apiAddress } from "../../http/api/user";
    	export default {
    	  data() {
    	    return {};
    	  },
    	
    	  methods: {
    	    // 请求url(post) 写在组件里
    	    test1() {
    	      this.$http.user
    	        .test1('post',{
    	          page: 1,
    	          size: 3
    	        })
    	        .then(res => {
    	          console.log("123", res);
    	          this.$message.success('请求成功')
    	        })
    	    },
    	    // url 统一管理
    	    test2() {
    	      this.$http.user
    	        .test2({
    	          page: 1,
    	          size: 3
    	        })
    	        .then(res => {
    	          console.log("123", res);
    	           this.$message.success('请求成功')
    	        })
    	    },
    	    // 表单提交形式,此接口不是真实接口,只是写法demo
    	    test3() {
    	      this.$http.user
    	        .test3({
    	          page: 1,
    	          size: 3
    	        })
    	        .then(res => {
    	          console.log("123", res);
    	           this.$message.success('请求成功')
    	        })
    	    },
    	  }
    	  //created(){}
    	};
    	</script>
    	<style lang="less" scoped></style>
    

    笔记:

    webpack官网

    vue-axios官网

    github dome

    展开全文
  • vue项目的前期配置 封装axios实例 封装API
  • vue axios 请求封装

    千次阅读 2018-10-26 16:48:18
    Vue axios封装心得,直接上代码     axois 的通用或者特殊配置,比如登陆接口的token,用不到就不用配置 axios.interceptors.request.use((config) =&gt; { if{ 可以给某个接口进行特殊配置 } ...
  • vue axios封装 axios 请求

    2020-03-27 15:04:31
    vue axios封装 axios 请求
  • vue中采用axios处理网络请求,避免请求接口重复代码,以及各种网络情况造成的异常情况的判断,采用axios请求封装和异常拦截操作; axios 请求封装 // 引入axios文件包 import axios from 'axios' // POST 方法封装 ...
  • axios请求封装--封装api

    千次阅读 2021-02-03 11:11:02
    //引入axios请求 axios.defaults.withCredentials=true; 为true是跨域时携带用户用户凭证 false不会携带用户凭证 创建request.js文件 import axios from 'axios' import {Message, MessageBox} from 'element-ui' ...
  • 基于axios请求封装的vue应用

    千次阅读 多人点赞 2021-05-02 19:52:09
    axios封装默认的自定义配置配置的加载优先级拦截器get请求post请求delete请求put请求:更新整个对象资源patch请求:更新对象的局部资源并发请求axios与ajax的区别?axios怎样自定义封装? 什么是axiosAxios 是一...
  • 简单axios请求封装

    2019-12-17 10:38:53
    Params和Data的区别 GET请求的参数都是在URL上的 服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。 如果想让服务器读取http body里面...// 封装axios primary import axios from 'a...
  • Axios请求封装一个公共的请求头 assets/commom/js/下新建一个js文件:eg:requestParams.js function buildRequestParam (conParam) { let userInfo = JSON.parse(localStorage.getItem('userInfo')) let param = { ...
  • 封装axios请求 在src目录下新建network文件夹 在文件夹下新建index.js(存放二次封装的请求) import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api_dev.wanxikeji.cn/', timeout: ...
  • 封装axios ( request.js ) import axios from "axios" //引入axios const service = axios.create({ baseURL: "XXXX", //请求的后台地址 timeout: 5000 }) //请求头 token 封装 service.defaults.headers....
  • axios请求封装和异常统一处理
  • html中使用js将axios请求封装

    万次阅读 2019-10-29 18:08:50
    百度中全是vue-cli中使用axios的方式,我需要用的是在html中引入axios.js 1、新建 httpRequest.js...//axios封装post请求 function axiosPostRequst(url,data) { let result = axios({ method: 'post', url: ur...
  • 工作119:axios请求封装

    2020-11-19 21:46:00
    /*封装系统需要的post请求 第一个参数传入url地址 第二个传入数据参数*/ export function postAction(url, parameter) { return axios({ url: url, method: "post", data: parameter }); } /*封装系统需要的put...
  • 封装请求类,含异常后的防错请求 import axios from 'axios' class Server { constructor(option) { this.basicUrl = '/';//接口前缀 this.option = option } //开始尝试请求 start() { let _self = th...
  • axios请求封装

    2019-12-15 15:59:38
    axios请求封装,在工程的src目录下面,新建一个文件夹lib,将该文件复制到lib文件夹下,并在main.js中设置为全局引用,例:在main.js中添加:import Extend from './lib/http',Extend(Vue.prototype),另外...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 22,965
精华内容 9,186
关键字:

关于axios请求封装