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 实例
了解什么是特征以及如何使用它们的最好方法是观察它们的本质
