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 实例