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
## 现在 数据是展开的状态 ,如下图

发布了34 篇原创文章 · 获赞 1 · 访问量 7419

猜你喜欢

转载自blog.csdn.net/chihouzi/article/details/103499091