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经典面试题: 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'}
});

axios 中文文档

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 总结篇的更多相关文章

  1. vue项目搭建 (二) axios 封装篇

    vue项目搭建 (二) axios 封装篇 项目布局 vue-cli构建初始项目后,在src中进行增删修改 // 此处是模仿github上 bailicangdu 的 ├── src | ├── ap ...

  2. vue axios 取消上次请求

    axios.defaults.timeout = 1000 * 5axios.defaults.baseURL = baseUrlvar CancelToken = axios.CancelToken ...

  3. vue axios拦截器 + 自编写插件 实现全局 loading 效果;

    项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...

  4. vue axios使用form-data的形式提交数据的问题

    vue axios使用form-data的形式提交数据vue axios request payload form data由于axios默认发送数据时,数据格式是Request Payload,而并 ...

  5. Vue 框架-01- 入门篇 图文教程

    Vue 框架-01- 入门篇 图文教程 Vue 官网:https://cn.vuejs.org/ 关于 Vue 的基础大家可以在官网的[起步]去学习,本系列文章主要针对实例项目应用 一.Vue 的安装 ...

  6. VUE AXIOS 跨域问题

    背景: 后台跨域使用通配符:context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); ...

  7. 基于Vue + axios + WebApi + NPOI导出Excel文件

    一.前言 项目中前端采用的Element UI 框架, 远程数据请求,使用的是axios,后端接口框架采用的asp.net webapi,数据导出成Excel采用NPOI组件.其业务场景,主要是列表页 ...

  8. vue Router——进阶篇

    vue Router--基础篇 1.导航守卫 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的 ...

  9. vue+axios新手实践实现登陆

    vue+axios新手实践实现登陆 https://segmentfault.com/a/1190000015201803 增加 利用HTML5的history.replacestate()修改当前页 ...

随机推荐

  1. JDBC报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than one time zone

    报错原因:查阅资料发现这都是因为安装mysql的时候时区设置的不正确 mysql默认的是美国的时区,而我们中国大陆要比他们迟8小时,采用+8:00格式 解决方法: 1.修改MySQL的配置文件,MyS ...

  2. VMware下Centos7-Minimal上网配置

    1.Centos7下载 http://isoredirect.centos.org/centos/7/isos/x86_64/CentOS-7-x86_64-Minimal-1810.iso 2.推荐 ...

  3. T-SQL Part XI: Login Failed 18456 以及修改Authentication Mode

    这是一个很常见的场景,安装SQL Server时候选择了默认的Windows Authentication Only,然后使用中发现还是需要支持用户名/密码登录. 按照MSDN的文档,然而并没有多大作 ...

  4. hdu 2516 取石子游戏 (Fibonacci博弈)

    取石子游戏 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. 结合Spring Security进行web应用会话安全管理

    在本文中,将为大家说明如何结合Spring Security 和Spring Session管理web应用的会话. 一.Spring Security创建使用session的方法 Spring Sec ...

  6. 函数的prototype

    1.函数的prototype属性 每一个函数都有一个prototype属性,默认指向object空对象(原型对象),每一个原型对象都有一个constructor属性,指向函数对象 2.给原型对象添加属 ...

  7. 力扣(LeetCode)加一 个人题解

    给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: 输入 ...

  8. Project Euler 63: Powerful digit counts

    五位数\(16807=7^5\)也是一个五次幂,同样的,九位数\(134217728=8^9\)也是一个九次幂.求有多少个\(n\)位正整数同时也是\(n\)次幂? 分析:设题目要求的幂的底为\(n\ ...

  9. 同时发起TCP连接

    如果你的socket编程只限于创建SOCK_STREAM的socket,用connect-accept建立连接,然后就是recv,send.你就会惊奇tcp连接还可以不用accept. 上图为两个AF ...

  10. 反汇编分析objc函数枢纽objc_msgSend

    在分析objc_msgSend之前,先来搞清楚另一个问题. 函数是什么?可能会答 void foo(void) {} 像这样就是一个函数.或者函数包括函数原型和函数定义,是一段执行某样功能的机器代码. ...