vue axios 总结篇
1.npm --save 和 --save-dev 有什么区别
发布到线上的叫生产环境~,在本地开发的时候叫开发环境,--save就是会打包到线上去并且在线上环境能用到的,比如你npm install 一个vue-router,这个在线上环境也是能用到的依赖,所以你要--save~ 比如vue-loader这个组件只需要在开发的时候编译就好,线上并不需用的到,所以就放在开发的--save-dev里就好~~~~
2.安装vue axios
axios 官方文档http://www.axios-js.com/
npm安装
npm install --save axios vue-axios
main.js 引入
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
### import 引用, Vue.use 注册到vue 实例上
vue.use 与Vue.prototype. $xx 区别
Vue经典面试题: Vue.use和Vue.prototype.$xx有血缘关系吗?
index.vue 页面 中使用
## 方法一
this.axios.get(api).then((response) => {
console.log(response)
})
## 方法二
this.$http.get(api).then((response) => {
console.log(response)
})
### 在.vue文件中使用 this 代表当前vue , (response)=>{}采用的是es6写法 解决函数内this指向问题
3.vue部署apache 刷新页面 404
添加伪静态 ->新建文件.htaccess文件
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
4. axios 并发请求
this.axios.all([this.axios.get('/api/index/index'),this.axios({
url:"/api/Address/index",
params:{
user_id:1
}
})]).then(res=>{
console.log(res);
})
## /api 更改为自己的地址
## 这里是两种get请求写法,第二个写法默认是get请求, get请求传参数必须使用params:{}
## 缺点 结果为下图 拿数据的话 只能 res[0],res[1]
this.axios.all([this.axios.get('/api/index/index'),this.axios({
url:"/api/Address/index",
params:{
user_id:1
}
})]).then(this.axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
## 使用 axios.spread
## 现在 数据是展开的状态 ,如下图
5.axios 全局配置
请求超时 在main.js 中设置
axios.defaults.timeout = 1000;
## 通过关键字 defaults 来设置
为什么要创建axios的实例呢?
当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
常用配置项
请求地址
url: '/user',
请求类型
method: 'get',
请根路径
baseURL: 'http://www.mt.com/api',
请求前的数据处理
transformRequest:[function(data){}],
请求后的数据处理
transformResponse: [function(data){}],
自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象
params:{ id: 12 }, 查询对象序列化函数
paramsSerializer: function(params){ }
request body
data: { key: 'aa'}, 超时设置s
timeout: 1000, 跨域是否带Token
withCredentials: false, 自定义请求处理
adapter: function(resolve, reject, config){}, 身份验证信息
auth: { uname: '', pwd: '12'}, 响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
在一个项目里 创建不同的axios 实例
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
6.axios封装
单独封装一个文件 request.js
import axios from 'axios'
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: '/api',
timeout: 5000
})
return instance(config)
}
## 这里把封装好的 实例return出去,
.vue 文件
// 导入
import { request } from "@/network/request";
request({
url: "/Address/index",
params: {
user_id: 1
}
}) .then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
### 封装好的实例本就就有。then catch 属性, 所有这里直接拿就行
### 迷惑 。。这里request 函数的 第一个参数 url + params 当 config 传给封装好的实例了,但是没有看到封装好的实例 用这个参数 ,于是我找到 axios 的源码看了一下,看下图。
编辑器 查看axios源码
7.axios 拦截
请求成功 /失败 拦截
响应成功 /失败 拦截
共四个拦截器
一.每次请求拦截
// 2.axios的拦截器
// 2.1.请求拦截的作用
instance.interceptors.request.use(config => {
console.log(config);
// 1.比如config中的一些信息不符合服务器的要求
// 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
// 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
return config
## 必须return 吧结果返回过去
}, err => {
// console.log(err);
})
二 响应拦截
// 2.2.响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data
### 配置每次响应成功 只返回data
}, err => {
console.log(err);
})
instance 是 文章一开始 封装的 axios 实例
vue axios 总结篇的更多相关文章
- vue项目搭建 (二) axios 封装篇
vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...
- vue axios 取消上次请求
axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
- vue axios使用form-data的形式提交数据的问题
vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...
- Vue 框架-01- 入门篇 图文教程
Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...
- VUE AXIOS 跨域问题
背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...
- 基于Vue + axios + WebApi + NPOI导出Excel文件
一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...
- vue Router——进阶篇
vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...
- vue+axios新手实践实现登陆
vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...
随机推荐
- JDBC报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone
报错原因:查阅资料发现这都是因为安装mysql的时候时区设置的不正确 mysql默认的是美国的时区,而我们中国大陆要比他们迟8小时,采用+8:00格式 解决方法: 1.修改MySQL的配置文件,MyS ...
- VMware下Centos7-Minimal上网配置
1.Centos7下载 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-1810.iso 2.推荐 ...
- T-SQL Part XI: Login Failed 18456 以及修改Authentication Mode
这是一个很常见的场景,安装SQL Server时候选择了默认的Windows Authentication Only,然后使用中发现还是需要支持用户名/密码登录. 按照MSDN的文档,然而并没有多大作 ...
- hdu 2516 取石子游戏 (Fibonacci博弈)
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 结合Spring Security进行web应用会话安全管理
在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话. 一.Spring Security创建使用session的方法 Spring Sec ...
- 函数的prototype
1.函数的prototype属性 每一个函数都有一个prototype属性,默认指向object空对象(原型对象),每一个原型对象都有一个constructor属性,指向函数对象 2.给原型对象添加属 ...
- 力扣(LeetCode)加一 个人题解
给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: 输入 ...
- Project Euler 63: Powerful digit counts
五位数\(16807=7^5\)也是一个五次幂,同样的,九位数\(134217728=8^9\)也是一个九次幂.求有多少个\(n\)位正整数同时也是\(n\)次幂? 分析:设题目要求的幂的底为\(n\ ...
- 同时发起TCP连接
如果你的socket编程只限于创建SOCK_STREAM的socket,用connect-accept建立连接,然后就是recv,send.你就会惊奇tcp连接还可以不用accept. 上图为两个AF ...
- 反汇编分析objc函数枢纽objc_msgSend
在分析objc_msgSend之前,先来搞清楚另一个问题. 函数是什么?可能会答 void foo(void) {} 像这样就是一个函数.或者函数包括函数原型和函数定义,是一段执行某样功能的机器代码. ...