精华内容
下载资源
问答
  • vue发送axios请求

    2020-05-12 11:14:24
    环境配置 在项目目录下执行npm instal axios 在main.js中加入 import axios from 'axios' import VueAxios from 'vue-axios' ... url: bdUrl+'/getMainInfo',//请求网址,自己的接口地址 //请求的query参数

    环境配置

    在项目目录下执行
    npm install vue-axios
    npm install axios
    在main.js中加入

    import axios from 'axios'
    
    Vue.prototype.axios = axios
    

    调用

     var that = this
     this.axios({
          method: 'get',//请求方法
          url: bdUrl+'/getMainInfo',//请求网址,自己的接口地址
          //请求的query参数
          params: {
            page: that.currentPage,
            type: that.siteOrLine
          },
          //data:this.form  //请求的body参数,get无此参数
        }).then((response) => {          //这里使用了ES6的语法
          that.data = response.data       //请求成功返回的数据
        }).catch((error) =>
          console.log(error))       //请求失败返回的数据
    
    
    展开全文
  • Vue之封装axios请求 封装axios主要是通过axios创建service实例,实例中放置配置,常见的配置有baseURL(请求发送的原始地址)、timeout(请求超时时间)、headers(请求头)、params(发送get请求的参数)、data...

    Vue之封装axios请求

    封装axios主要是通过axios创建service实例,实例中放置配置,常见的配置有baseURL(请求发送的原始地址)、timeout(请求超时时间)、headers(请求头)、params(发送get请求的参数)、data(发送post请求的参数)、等等

    封装axios请求的另外一个目的是配置请求拦截器,和响应拦截器

    service.interceptors.requesst servcie.interceptors.response 注:service 不是固定名字,只要是axios实例名字都可
    **详情请见axios官方文档**

    /*
    	service.js
    	使用时因为时通过export default service 
    	所以可以通过 import service from "./utils/service.js"
    */
    import axios from "axios";
    import {getToken} from "./auth";
    import {Message} from "element-ui"; //为饿了么ui自带的message
    
    const service = axios.create({
      baseURL: 'http://localhost:8080',
      timeout: 5000,
    
    })
    /*
      请求拦截
     */
    service.interceptors.request.use((config)=>{
      if (getToken()){
        config.headers['token']=getToken(); //在发送请求之前将在请求头中配置token
      }
      return config; 
    },(error)=>{
      return Promise.reject(error); // 对请求错误做些什么
    })
    service.interceptors.response.use((response)=>{
      const res= response;
      console.log(res);
      if (!(res.data.success)){ //请求响应,这里是我后端返回的map对象,中间的key为success传递请求响应状态
        Message({
          type: 'error',
          message: res.data.message ||'请求错误', //弹出的res.data.message 同样为后端传递
        });
        location.reload(); // 刷新表单 重新加载
        return  Promise.reject(new Error(res.data.message ||'请求错误'));
      }else {
        return  res;
      }
    },(error)=>{
      Message({
        type: 'error',
        message:error.message,
      })
      location.reload();
      return Promise.reject(error);
      }
    )
    
    export default service;
    
    

    Vue之封装axios.get、axios.post

    /*
    	这里要需要用到之前封装的service.js 也就是axios实例
    	在http.js中import service from '../utils/service.js'引入
    	get(传入的请求地址url,请求传递的参数){
    	//主要是通过设置config中的method方法决定请求的类型
    	  return service(config);
    	}
    	至于post和get请求的不同之处
    	get传递的是params post传递的是data
    	get/post 方法使用 是 import {get/post} from '../utils/http.js'
    	
    */
    import service from "./service";
    
    export function get(url,params){
    
      const config={
        method:'get',
        url:url,
      }
      if(params){
        config.params=params;
      }
      return service(config);
    }
    export function post(url,params){
    
      const config={
        method:'post',
        url:url,
      }
      if(params){
        config.data=params;
      }
      return service(config);
    }```
    
    
    展开全文
  • 基于vue配置axios

    2019-10-07 02:44:34
    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85 1、背景 ...在项目开发中ajax请求是必不可缺少 ...一部分ajax请求不需要loading或则请求时间少于多少是不显示...配置基于个人vue项目进行配置,...

    转载地址:https://juejin.im/post/5a02a898f265da43052e0c85

     

    1、背景

    • 在项目开发中ajax请求是必不可缺少
    • 一部分ajax请求不需要loading或则请求时间少于多少是不显示loading
    • 项目中对请求的同一化处理(错误处理,返回数据格式化处理,loading处理,token处理)
    • 配置基于个人vue项目进行配置,已加载vux相关组件,会进行一些依赖的import(可以按需配置)
     1 import Vue from 'vue'
     2 import axios from 'axios'
     3 //项目的一些环境配置参数,读取host
     4 import config from '@/config'
     5 //vuex状态管理,这里主要进行对全局loading的控制
     6 import store from '@/store'
     7 //vue-router对相应状态码的页面操作(router实例)
     8 import router from '@/router'
     9 //console对应封装
    10 import { log } from '@/utils'

    2、解决方案

    对于axios的封装中我们定义几个参数进行申明

     1 // 加载最小时间
     2 const MINI_TIME = 300
     3 // 超时时间(超时时间)
     4 let TIME_OUT_MAX = 5000
     5 // 环境value
     6 let _env = process.env.NODE_ENV
     7 // 请求接口host
     8 let _apiHost = config.api
     9 // 请求组(判断当前请求数)
    10 let _requests = []

    一般一个项目中的根host和Content-Type都是统一的,这里对axios进行统一的配置(如果这个后端需要formData格式的表单即content-type='application/x-www-form-urlencoded;charset=utf-8'数据,需要对请求数据进行表单序列化,比较快的方式就是引入qs库qs.stringify进行处理后传输)

    1 axios.defaults.headers.common['Content-Type'] = 'application/json'
    2 axios.defaults.baseURL = _apiHost

    一般情况下项目中同一时刻都会有不止一个请求在进行(还没有返回),要判断当前是否还存在进行中的ajax,就需要对_requests这个数组进行维护;

      1 /**
      2  * 添加请求,显示loading
      3  * @param {请求配置} config 
      4  */
      5 function pushRequest(config) {
      6   log(`${config.url}--begin`)
      7   _requests.push(config)
      8   Vue.$vux.loading.show({
      9     text: 'Loading'
     10   })
     11   store.dispatch('loading')
     12 }
     13 
     14 /**
     15  * 移除请求,无请求时关闭loading
     16  * @param {请求配置} config 
     17  */
     18 function popRequest(config) {
     19   log(`${config.url}--end`)
     20   let _index = _requests.findIndex(r => {
     21     return r === config
     22   })
     23   if (_index > -1) {
     24     _requests.splice(_index, 1)
     25   }
     26   if (!_requests.length) {
     27     Vue.$vux.loading.hide(0)
     28     store.dispatch('loading', false)
     29   }
     30 }
     31 接下来对axios基于上面的准备进行处理
     32 
     33 /**
     34  * 请求地址,请求数据,是否静默,请求方法
     35  */
     36 export default (url, data = {}, isSilence = false, method = 'POST') => {
     37   let _opts = { method, url }
     38   //通用数据的合并(token)
     39   let _data = Object.assign({}, data, { token: store.getters.token })
     40   const _query = {}
     41   for (let _key in _data) {
     42     if (_data.hasOwnProperty(_key) && _data[_key] !== '') {
     43       _query[_key] = _data[_key]
     44     }
     45   }
     46   //axios实例请求定时器ID
     47   let _timer = null
     48   //判断请求类型
     49   if (method.toLocaleUpperCase() === 'POST') {
     50     _opts.data = _query
     51   } else {
     52     _opts.params = _query
     53   }
     54   //返回一个promise
     55   return new Promise((resolve, reject) => {
     56     //实例化axios
     57     const _instance = axios.create({
     58       timeout: TIME_OUT_MAX
     59     })
     60     //定义请求的唯一标识
     61     let _random = { stamp: Date.now(), url: `${_apiHost + url}` }
     62     //判断是否静默(静默的话就不加入请求标识队列,不是则申明此请求实例的定时器)
     63     if (!isSilence) {
     64       _timer = setTimeout(() => {
     65         pushRequest(_random)
     66       }, MINI_TIME)
     67     }
     68     //axios实例发送当前请求
     69     //请求完成:1、取消当前请求的定时器;2、在当前请求标识队列中移除当前标识;
     70     3、成功的话返回统一处理后的数据,失败则对状态码进行判断
     71     _instance(_opts)
     72       .then(res => {
     73         let responseData = res.data
     74         clearTimeout(_timer)
     75         popRequest(_random)
     76         resolve(res.data)
     77       })
     78       .catch(res => {
     79         let _response = res.response
     80         let _message = null
     81         clearTimeout(_timer)
     82         popRequest(_random)
     83         switch (_response.status) {
     84           case 404:
     85             _message = '404,错误请求'
     86             break
     87           case 401:
     88             router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } })
     89             _message = '未授权'
     90             break
     91           case 403:
     92             _message = '禁止访问'
     93             break
     94           case 408:
     95             _message = '请求超时'
     96             break
     97           case 500:
     98             _message = '服务器内部错误'
     99             break
    100           case 501:
    101             _message = '功能未实现'
    102             break
    103           case 503:
    104             _message = '服务不可用'
    105             break
    106           case 504:
    107             _message = '网关错误'
    108             break
    109           default:
    110             _message = '未知错误'
    111         }
    112         if (!isSilence) {
    113           Vue.$vux.toast.show({
    114             text: _response.data && _response.data.error ? _response.data.error : _message,
    115             type: 'warn',
    116             width: '10em'
    117           })
    118         }
    119         reject(res)
    120       })
    121   })
    122 }

    作者:NoManReady
    链接:https://juejin.im/post/5a02a898f265da43052e0c85
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    转载于:https://www.cnblogs.com/zhaobao1830/p/7810371.html

    展开全文
  • 所以我们可以配置一个代理的服务器去请求产生跨域问题的目标服务地址获取数据后由代理服务器将请求到的数据转交给客户端, 这样就实现了跨域访问 如何实现 1、在vue项目的根目录下创建vue.config.js文件

    跨域是如何产生的:

    由浏览器的同源策略引起的,同源是指,协议、域名和端口号都相同

    当协议、域名、端口号有任一不同时,都会产生跨域

    解决方案:

    1、配置代理解决跨域

    跨域是客户端请求服务端的数据时,产生的问题,而服务端和服务端之间如果没有设置禁止跨域的权限是没有跨域的问题的,

    所以我们可以配置一个代理的服务器去请求产生跨域问题的目标服务地址获取数据后由代理服务器将请求到的数据转交给客户端,

    这样就实现了跨域访问

    如何实现

    1、在vue项目的根目录下创建vue.config.js文件

    2、配置代理,在创建的vue.config.js文件中添加如下代码

    3、在main.js中配置一个url请求前缀

    
    
    

    4、调用接口

     

    展开全文
  • 先描述一下场景:vue项目,后台请求地址配置文件中已经设置为全局的,每次变动只需修改一次即可,然后要部署到三台服务器。然后:修改服务器地址,打包,部署 --> 修改服务器地址,打包,部署 --> 修改...
  • api.js用来统一管理请求地址 http.js用来封装请求函数 request.js用来封装axios 基础地址从多环境变量中以配置 // 导入即可使用基础地址 import { baseApi } from '@/config' 在request.js下封装axios 基础地址...
  • 前端请求后端接口进行数据交互的时候,需要配置axios2. 导入axios包, main.jsimport axios from 'axios'3. 挂载到原型配置上,便于所有的组件都可以访问this.$http// 挂载全局对象Vue.prototype.$http = axios4. ...
  • 配置好了跨域  <p style="text-align:center"><img alt="" height="288" src="https://img-ask.csdnimg.cn/upload/1611649049084.jpg" width="463" /></p> 在这里请求的 <p style="text-align:center"><img alt=...
  • Axios的中文文档以及github地址如下:一、安装Axios插件npm install axios --save二、在main.js中引入Axios库import Axios from "axios"//将axios挂载到原型上Vue.prototype.$axios =Axios;//配置全局的a...
  • VS code 配置 Vue axios 跨域请求

    千次阅读 2019-11-12 09:21:15
    VS code 配置 Vue axios 跨域请求 第一步: config/index.js //跨域配置 proxyTable: { ‘/api’: { target: ‘http://ip:端口’, // 后台访问地址 接口的域名 // secure: false, // 如果是https接口,需要...
  • vueaxios设置公共请求地址

    千次阅读 2019-07-17 11:00:08
    先描述一下场景:vue项目,后台请求地址配置文件中已经设置为全局的,每次变动只需修改一次即可,然后要部署到三台服务器。 然后:修改服务器地址,打包,部署 -->修改服务器地址,打包,部署 -->修改...
  • VUE是基于node.js,所以解决跨域问题,设置一下反向代理即可。 我这里要调用的第三方接口地址为http://v.juhe.cn/toutiao/index?type=top&key=136c500303493492d6f855c6a62f48ee 找到项目的目录config > ...
  • axios 请求封装成公共方法,方面在项目中使用1.首先在项目引入axioscnpm iaxios --save || npm i --save axios2.在公共js引入axios在js中引入axios,引入请求的http链接3...请求地址的处理此处请求地址处理actionN...
  • vue axios 请求跨域

    2020-11-25 17:40:18
    接上篇vue baseUrl多后端环境切换,换成真实的地址后发现接口总是不通,这对这个vue配置还是理解不到位,这回做了波实验终于通透了 请求封装思路 1、将axios后端请求和前端请求分离开 这点是用baseURL做到,前端不...
  • vue axios跨域请求

    2020-06-07 16:37:33
    //配置请求的跟路径 跨域地址 axios.defaults.baseURL = "http://192.168.11.102:8888/" //将$http放到Vue的原型中 方便后面的使用 Vue.prototype.$http = axios this.$refs[formName].validate(asy
  • 先描述一下场景:vue项目,后台请求地址配置文件中已经设置为全局的,每次变动只需修改一次即可,然后要部署到三台服务器。 然后:修改服务器地址,打包,部署 -->修改服务器地址,打包,部署 -->修改...
  • vue3.0脚手架 配置axios

    千次阅读 2021-03-04 17:24:59
    vue3.0脚手架 配置axios 1、首先安装axios ,vue-axios,使用yarn 或者npm 安装 使用yarn: yarn add axios yarn add vue-axios 使用npm npm install axios npm install vue-axios 2、安装完成后在项目src文件夹建一...
  • vue配置全局请求地址

    千次阅读 2020-03-31 09:14:48
    1、首先安装好axios和qs(,序列化字符串,处理发送...axios.defaults.baseURL = "自己的请求地址" axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; Vue.proto...
  • http.js封装axios的普通配置,连接超时时间、请求前后的判断与添加头部信息(token) base.js封装接口的域名,方便域名更改时做统一的处理 user.js封装用户相关的请求数据 index.js对外统一暴露请求地址 http.js...
  • axios配置公共请求地址axios把各个请求都需要使用的相同的根地址做统一配置,使得相同代码只维护一份,提升开发速度。 语法: axios.defaults.baseURL = 公共根地址 把axios配置成为vue实例成员 在Vue的大环境...
  • vue项目axios的全局配置

    千次阅读 2019-04-17 14:06:23
    新建axios-init.js文件 import axios from 'axios'; export default()=>{ let loadingInstance; //创建Loading 的实例 axios.defaults.baseURL = ... // 配置axios请求地址 axios.defaults.head...
  • Vuecli3 axios跨域请求解决方案 前端页面的地址 http://localhost:8080/ 后端接口地址 http://localhost:3005/ 百度到的解决方案(几乎都是这样配置的): 1、在main.js添加一下代码 import axios from 'axios'...
  • vue-封装axios请求

    2020-04-13 16:54:04
    最近接手新的vue项目,发现axios竟然没有封装,立马动手封装,这里记录一下完整的封装过程,废话不说,直接上代码 baseConfig.js文件 //存放各个服务器的地址 // const express = require('express') const proEnv =...
  • vue Axios封装请求

    2020-07-24 12:48:54
    这里写自定义目录标题一、先安装axios依赖,还有qs依赖二、在main.js入口引用三、定义全局变量复用域名地址四、错误信息弹窗定义五、API定义六、接口定义七、导入配置八、main文件引入九、使用 一、先安装axios依赖...
  • 那么问题就来了,这么多环境每个环境的后台服务器地址是不样的,总不能每发布一个环境就改一次代码吧。 于是就有了环境变量,根据环境变量判断当前所需要部署的环境,输出对应的服务器地址。那么我们该如何设置环境...
  • vue+axios实现登录注册

    2020-09-08 19:23:01
    在mian.js中配置axios,用prototype挂载就可以在别的vue组件使用就可以使用this.$axios来发送axios请求 var axios = require('axios')//引用axios axios.defaults.baseURL = 'https://adny.utools.club/api'//设置一...
  • 最近使用 Vue 开发后台管理系统项目,开发过程遇到一个特别闹心的事情,由于项目没有上线,所有接口地址都是后台人员的电脑做为服务器,这个项目有几个后台同时开发接口,每一个大模块对应的接口地址不一样。...
  • vue axios配置

    2019-10-21 13:59:01
    首先安装,使用了vue-axios ...其次在src下面新建一个网络请求文件夹,用来放请求地址和网络请求封装文件等 url.js中放项目请求地址导出即可 const onlineUrl = '' const testUrl = 'http://160.16.98.97:8081'...
  • 现在想封装axios的async/await方式请求接口,但配置不太会,找网上的试了一下,目前卡在了返回的数据是string格式,怎么转json格式?请教一下怎么封装这个?网上还是什么拦截器...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 308
精华内容 123
关键字:

vue配置axios请求地址

vue 订阅