2019-10-21 19:18:52 qq_37600506 阅读数 357
  • Vue 2.x全家桶(vue-cli3,vuex,vue-router,axios)

    第一章、vue起步 :通过todoList宏观感受vue,初步了解vue的一些基础语法以及概念,建议同学们尝试养成结合文档进行学习的习惯,为后面的基础知识讲解与学习做好准备。 第二章、基础精讲:结合代码案例对vue的基础知识进行详细讲解 第三章、深入vue组件:对vue组件进行详细的讲解 第四章、周边生态 :对vue周边技术进行讲解,如vue-cli3,vuex,vue-router,axios进行讲解 第五章、工作中常见问题与解决技巧 :vue-cli3快速创建项目,webpack的配置,路由,表单封装,数据校验,权限设计,项目的联调,测试与发布等工作中常用到的实用技巧 注:  本套课程因课时较多,所以采用连载方式,已录制好的课时先开放给同学们进行学习,剩余章节每周至少更新5课时,直至课程所有章节更新完毕。 同时,vue 3.0发布后,我会增加福利章节,保证大家第一时间学习与感受到3.0的核心变化。

    22 人正在学习 去看看 杜从文

一、axios和vue-axios区别

1、axios是基于promise的HTTP库,可以使用在浏览器和node.js中,它不是vue的第三方插件
2、axios使用的时候不能像vue的插件(如:Vue-Router、VueX等)通过Vue.use()安装插件,需要在原型上进行绑定:Vue.prototype.$axios = axios;
3、vue-axios是axios集成到Vue.js的小包装器,可以像插件一样安装:Vue.use(vueAxios);

二、vue-axios使用

1、npm安装

npm install --save axios vue-axios

2、引入

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios,axios);

3、使用
用法1:

Vue.axios.get('url',{params:userId:1}).then(res => {}).catch(err => {});

用法2:

this.axios.get('url',{params:userId:1}).then(res => {}).catch(err => {});

用法3:

this.$http.get('url',{params:userId:1}).then(res => {}).catch(err => {});

注意:使用vue的插件的写法(vue-axios)更符合vue整体的生态环境,直接写原型链会有些粗暴,
且直接写原型链你取名为$http,你的项目成员可能取另外的名字,维护起来比较麻烦,而统一使用vue-axios就没有太多歧义

2019-10-10 11:05:36 weixin_42421494 阅读数 213
  • Vue 2.x全家桶(vue-cli3,vuex,vue-router,axios)

    第一章、vue起步 :通过todoList宏观感受vue,初步了解vue的一些基础语法以及概念,建议同学们尝试养成结合文档进行学习的习惯,为后面的基础知识讲解与学习做好准备。 第二章、基础精讲:结合代码案例对vue的基础知识进行详细讲解 第三章、深入vue组件:对vue组件进行详细的讲解 第四章、周边生态 :对vue周边技术进行讲解,如vue-cli3,vuex,vue-router,axios进行讲解 第五章、工作中常见问题与解决技巧 :vue-cli3快速创建项目,webpack的配置,路由,表单封装,数据校验,权限设计,项目的联调,测试与发布等工作中常用到的实用技巧 注:  本套课程因课时较多,所以采用连载方式,已录制好的课时先开放给同学们进行学习,剩余章节每周至少更新5课时,直至课程所有章节更新完毕。 同时,vue 3.0发布后,我会增加福利章节,保证大家第一时间学习与感受到3.0的核心变化。

    22 人正在学习 去看看 杜从文

一开始查找了vue使用axios跨域的问题如何解决,但是electron-vue中没有config文件夹,后来查找了electron-vue的axios跨域问题

在.electron-vue文件夹下dev-runner.js中修改如下代码

const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        proxy: {
          '/httpUrl': {
            // 请求的目标服务器地址
            target: '指向你的服务器地址',
            // 设置允许跨域
            changeOrigin: true,
            // 重写路径
            pathRewrite: {
              '^/httpUrl': ''
            },
            headers: {
              referer: ''
            }
          }
        },
        before (app, ctx) {
          app.use(hotMiddleware)
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

这个时候已经可以跨域访问服务器

this.$http.get('/httpUrl', {
      params: { // 参数
        m: 'prod',
        a: 'list'
      }
    }).then(res => { // 请求成功后的处理函数
      this.isLoading = false
      this.items = res.data.data
      console.log(this.items)
    }).catch(err => { // 请求失败后的处理函数
      console.log(err)
    })

详情参见https://segmentfault.com/q/1010000020077878

2019-04-20 23:20:42 qq_36484899 阅读数 1335
  • Vue 2.x全家桶(vue-cli3,vuex,vue-router,axios)

    第一章、vue起步 :通过todoList宏观感受vue,初步了解vue的一些基础语法以及概念,建议同学们尝试养成结合文档进行学习的习惯,为后面的基础知识讲解与学习做好准备。 第二章、基础精讲:结合代码案例对vue的基础知识进行详细讲解 第三章、深入vue组件:对vue组件进行详细的讲解 第四章、周边生态 :对vue周边技术进行讲解,如vue-cli3,vuex,vue-router,axios进行讲解 第五章、工作中常见问题与解决技巧 :vue-cli3快速创建项目,webpack的配置,路由,表单封装,数据校验,权限设计,项目的联调,测试与发布等工作中常用到的实用技巧 注:  本套课程因课时较多,所以采用连载方式,已录制好的课时先开放给同学们进行学习,剩余章节每周至少更新5课时,直至课程所有章节更新完毕。 同时,vue 3.0发布后,我会增加福利章节,保证大家第一时间学习与感受到3.0的核心变化。

    22 人正在学习 去看看 杜从文

关于VUE的vue-axios使用

安装

//npm
$ npm i axios -S
$ npm i vue-axios -S
//main.js

//全局注册 axios
import Vue from 'vue';
import axios from 'axios';
Vue.prototype.$axios = axios;//this.$axios使用

//或 vue-axios
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios,axios);//Vue.axios/this.axios/this.$http使用axios,一次封装方便协作规范

//template.vue
//模板中局部引入
import axios from 'axios';//this.axios使用

使用

  1. GET请求、POST请求
    axios.get(url[,params]).then(function(response){...}).catch(function(error){...});
    axios.post(url,data).then(function(response){...}).catch(function(error){...})
  2. 多个并发请求
    并发的助手函数axios.all(iterable);axios.spread(callback)
function get1(){};
function get2(){};
function get3(){};
axios.all([get1(),get2(),get3()]).then(axios.spread(function(data1,data2,data3){
	...
}))
  1. API

传递相关配置参数创建请求:

  • axios(config)发送POST请求:
	axios({
		method:'post',
		url:'url',
		data:{datas}
	})
  • axios(url[,config])发送GET请求:
	axios('/url?id=123456')
	//或
	axios('/url',
	params:{
		id:123456
	}
	)
  1. 所有方法别名
别名 说明
axios.request(config) 创建请求
axios.get(url[,config]) GET
axios.delete(url[,config]) DELETE
axios.head(url[,config]) HEAD
axios.post(url[,data[,config]]) POST
axios.put(url[,data[,config]]) PUT
axios.patch(url[,data[,config]]) PATCH
  1. 创建实例
    axios.creat([config])

  2. 可用的config配置选项

axios.creat({
	baseURL:'url',
	url:'url',
	method:'get(默认)/post',
	transformRequest:[function(data){...处理数据...}],//‘POST’,‘PUT’,‘PATCH’发送前,修改请求数据
	transformResponse:[function(data){...处理数据...}],//传递给then/catch前,处理响应数据
	headers:{'X-Request-With':'XMLHttpRequest'},//自定义请求头
	params:{ID:123456},//一起发送的URL参数
	paramsSerializer:function(params){...},//处理params的序列化函数
	data:{data},//‘POST’,‘PUT’,‘PATCH’请求主体被发送的数据
	timeout:1000,//超时中断请求时间
	withCredentials:false(默认),//跨域请求是否需要凭证
	auth:{},//设置并覆盖'Authorization'头信息,HTTP基础验证及凭据
	adapter:function(config){},//自定义处理请求,便于测试
	responseType:'json'(默认)//‘arraybuffer’,‘blob’,‘document’,‘json’,‘text’,‘stream’
	xsrfCookieName:'XSRF-TOKEN',
	xsrfHeaderName:'XSRF-TOKEN',//xsrf token值的cookie名称和HTTP头名称
	onUploadProgress:function(){},
	onDownloadProgress:function(){},//对原生进度事件的处理
	maxContentLenth:2000,//响应内容的最大尺寸
	validateStatus:function(status){},
	maxRedirects:5(默认),//为0不follow任何重定向
	httpAgent:new.http.Agent({keepAlive:false}),
	httpsAgent:new.https.Agent({keepAlive:false}),//node.js中是否开启自定义代理
	proxy:{
		host:'107.0.0.1',
		port:9000,
		auth:{username:'Michal',password:'123456'}
		},//自定义代理服务器及凭据,设置并覆盖HTTP中的Proxy-Authorization头信息
	cancelToken:new CancelToken(function(cancel){...})//取消请求的cancel token
	})
  1. 响应的结构
//then(response=>{...})得到的数据结构
response:{
	data:{},
	status:200,
	statusText:"OK",
	headers:{},
	config:{},//catch(error=>{...})得到的数据结构
error:{
	response:{
		data:{},
		status:'',
		headers:{},
		},
	message:'',
	config:{},
	}
  1. 配置默认值
  • 全局的axios默认值
axios.defaults.baseURL = '';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN ;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' ; 
  • 自定义实例的axios配置

    例如创建实例时var api = axios.create({baseURL:'URL'});创建后修改api.defaults.headers.conmon['Authorization']=AUTH_TOKEN;

  • 配置合并优先顺序

    库的默认lib/defaults.js => 实例创建时axios.create() => 请求发送时的config参数

  1. 拦截器
  • 请求或响应被then或catch处理前拦截:
 axios.interceptors.request.use(function(config){
 	...发送前...
 	return config
 	},function(error){
 	...错误处理...
 	return Promise.reject(error)
 	});
  • 移除拦截器:
    var myInterceptor = axios.interceptors.request.use(function(){...});
    axios.interceptors.request.eject(myInterceptor);
  • 自定义实例添加:
    var api = axios.create();
    api.interceptors.request.use(function(){...})

vue生态下的vue-axios

//全局注册
import Vue from 'vue';
import axios from 'axios';
import vueAxios from 'vue-axios';
Vue.use(vueAxios,axios);

Vue.axios/this.axios/this.$http使用axios,一次封装方便协作规范;

qs.js序列化处理数据:qs.parse()和qs.stringify();以及与JSON.parse()/stringify()的异同;

2018-02-01 11:12:00 qq_38209578 阅读数 22204
  • Vue 2.x全家桶(vue-cli3,vuex,vue-router,axios)

    第一章、vue起步 :通过todoList宏观感受vue,初步了解vue的一些基础语法以及概念,建议同学们尝试养成结合文档进行学习的习惯,为后面的基础知识讲解与学习做好准备。 第二章、基础精讲:结合代码案例对vue的基础知识进行详细讲解 第三章、深入vue组件:对vue组件进行详细的讲解 第四章、周边生态 :对vue周边技术进行讲解,如vue-cli3,vuex,vue-router,axios进行讲解 第五章、工作中常见问题与解决技巧 :vue-cli3快速创建项目,webpack的配置,路由,表单封装,数据校验,权限设计,项目的联调,测试与发布等工作中常用到的实用技巧 注:  本套课程因课时较多,所以采用连载方式,已录制好的课时先开放给同学们进行学习,剩余章节每周至少更新5课时,直至课程所有章节更新完毕。 同时,vue 3.0发布后,我会增加福利章节,保证大家第一时间学习与感受到3.0的核心变化。

    22 人正在学习 去看看 杜从文

本文只要介绍vue-axios基本用法与常见的问题

一、vue-axios插件的安装

使用 npm:

$ cnpm install axios

二、vue-axios插件的引用

出于页面的优雅考虑,使用vue2.0 vue-cli脚手架的代码风格去实现。

1、创建引用文件:

用ide打开项目文件,在src目录下创建文件夹axios,后在文件夹内创建index.js。如图:
这里写图片描述

2.编写引用的相关代码:

step1: axios下的index.js:

/*引入Vue框架*/
import Vue from 'vue';
/*引入资源请求插件*/
import axios from 'axios';

/*使用axios插件*/
Vue.prototype.$axios = axios;
export default({
});

step2: src下的main.js,代码引入已经引用好的axios文件

import Vue from 'vue';
import App from './App';
import router from './router';
import resource from './resource';
import axios from './axios';//通过import引入

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  resource,
  axios,//通过import引入,然后在这里调用
  components: { App },
  template: '<App/>'
});

tip:如果代码没有反应,请用cmd进入到项目目录,$cnpm run dev。

这里写图片描述

step3: App.vue页面的发起的数据请求,案例是mock,调用本地的data.json。

export default {
  name: 'App',
  data() {
    return {
      itemList: [],
    }
  },
  mounted() {
    this.getAjax();
  },
  methods:{
    getAjax:function () {
      this.$axios.get('api/seller')
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  }
}

tip: 此处的‘api、seller’为本地自己配置的data.json文件的数据,可以直接替换成url路径。成功调用axios,服务器会返回data数据包,如图,在谷歌按F12(开发者模式下):

这里写图片描述
只要实现该效果即可。如果问题请继续往下看__

三、使用vue-axios插件常见问题

看似很简单,但是经常会遇到一些奇奇怪怪的问题。
3.1 vue用axios时报错:Cannot read property ‘protocol’ of undefined!
遇到这种情况的小伙伴,主要是陷入了一个误区。 axios 是一个vue插件这话没毛病,但是,重点来了!!!axios使用方法跟vue-router以及vue-resource的调用方式不同,不能使用Vue.use(axios)
而是:

/*使用axios插件*/
Vue.prototype.$axios = axios;

可以参照上方step2的格式书写。

持续踩坑ing…

2018-12-29 17:28:51 weixin_43860135 阅读数 85
  • Vue 2.x全家桶(vue-cli3,vuex,vue-router,axios)

    第一章、vue起步 :通过todoList宏观感受vue,初步了解vue的一些基础语法以及概念,建议同学们尝试养成结合文档进行学习的习惯,为后面的基础知识讲解与学习做好准备。 第二章、基础精讲:结合代码案例对vue的基础知识进行详细讲解 第三章、深入vue组件:对vue组件进行详细的讲解 第四章、周边生态 :对vue周边技术进行讲解,如vue-cli3,vuex,vue-router,axios进行讲解 第五章、工作中常见问题与解决技巧 :vue-cli3快速创建项目,webpack的配置,路由,表单封装,数据校验,权限设计,项目的联调,测试与发布等工作中常用到的实用技巧 注:  本套课程因课时较多,所以采用连载方式,已录制好的课时先开放给同学们进行学习,剩余章节每周至少更新5课时,直至课程所有章节更新完毕。 同时,vue 3.0发布后,我会增加福利章节,保证大家第一时间学习与感受到3.0的核心变化。

    22 人正在学习 去看看 杜从文

关于vue-cli使用axios的跨域问题
我卡了半个小时,就是很多细节撒花姑娘没有处理好造成的
下面贴代码
proxyTable: {
‘/index’:{
target:’ ‘,
changeOrigin:true,
pathRewrite:{
‘^/index’: ‘/index’
}
}
},
在config里的index.js里找到proxyTable配置
target写上你的api域名地址
changeOrigin等于true是允许跨域
下面的pathRewrite是替换的
this.$http({
method:‘get’,
url:’’,
}).then(function(res){
console.log(res.data.data)
}).catch(function(err){
console.log(err)
})
url只要写上api就可以了
希望可以帮助到大家!有什么看了有深入理解的大佬们,看到还请指定一二

Vue---axios-get请求

阅读数 27

没有更多推荐了,返回首页