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经典面试题: 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 实例