0
点赞
收藏
分享

微信扫一扫

Vue学习笔记03-Axios

独兜曲 2022-08-18 阅读 94
Vue教程ios数据css编程语言
加载失败

目录

  • ​​Vue学习笔记01-Vue基础​​
  • ​​Vue学习笔记02-Vue组件​​
  • ​​Vue学习笔记03-Axios​​
  • ​​Vue学习笔记04-Vue路由​​
  • ​​Vue学习笔记05-H5实例百度音乐​​
  • ​​Vue学习笔记06-Vuex​​
  • ​​Vue学习笔记07-Web商城实例​​

Axios

13. Vue-axios基础Get请求

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

中文: ​​https://www.kancloud.cn/yunye/axios/234845​​ github: https/github.com/axios/axios

（1）安装 ​​npm install axios --save​​ （2）main.js中引入加载

import Axios form "axios"
Vue.prototype.$axios = Axios

（3）请求

this.$axios.get("http://127.0.0.1/add/",{params: {a: "1",b: "2"}})
    .then(res=> {this.result = res.data;})
    .catch(error=> {console.log(error); })

也可使用通用的this.$axios({method:"get", url: '', params: {}, data: {}})

this.$axios({
      method: 'get',
      url: 'https://httpbin.org/get',
      params: {name: '临渊', age: 18, sex: '男'}
    })
    .then(res=> { this.data=res.data })
    .catch(error=> { console.log(error) })

示例：
src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'  // 导入

import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

Vue.prototype.$axios = Axios  // 挂载到原型的$axios上

/* eslint-disable no-new */
new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件
})

src/App.vue

<template>
  <div id="app">
    {{ data }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      data: {}
    }
  },
  created(){
    // this.$axios.get('https://httpbin.org/get?name=临渊&age=18', { params: {sex: '男'} })
    // .then(res=> { this.data=res.data })
    // .catch(error=> { console.log(error) })
    this.$axios({
      method: 'get',
      url: 'https://httpbin.org/get',
      params: {name: '临渊', age: 18, sex: '男'}
    })
    .then(res=> { this.data=res.data })
    .catch(error=> { console.log(error) })

  }
}
</script>
<style lang="css">
</style>

14. Vue-axios基础Post请求

发送表单格式数据

  • ​​this.$axios.post('https://httpbin.org/post', "name=临渊&age=18&sex=男")​​

或使用qs将对象转为urlencoded字符串 （需要导入qs）

this.$axios.post('https://httpbin.org/post', qs.stringify({name: '临渊', age: '18', sex: '男'}))

通用请求方式

this.$axios({
      method: 'post',
      url: 'https://httpbin.org/post',
      data: "name=临渊&age=18&sex=男"  // 或 qs.stringify({name: '临渊', age: '18', sex: '男'})
    })

示例：
src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'  // 导入

import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

Vue.prototype.$axios = Axios  // 挂载到原型的$axios上

/* eslint-disable no-new */
new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件
})

src/App.vue

<template>
  <div id="app">
    {{ data }}
  </div>
</template>

<script>
import qs from "qs"
export default {
  name: 'App',
  data(){
    return {
      data: {}
    }
  },
  created(){
    // this.$axios.post('https://httpbin.org/post', "name=临渊&age=18&sex=男")
    // this.$axios.post('https://httpbin.org/post', qs.stringify({name: '临渊', age: '18', sex: '男'}))
    // .then(res=> { this.data=res.data })
    // .catch(error=> { console.log(error) })
    this.$axios({
      method: 'post',
      url: 'https://httpbin.org/post',
      data: "name=临渊&age=18&sex=男"  // 或 qs.stringify({name: '临渊', age: '18', sex: '男'})
    })
    .then(res=> { this.data=res.data })
    .catch(error=> { console.log(error) })

  }
}
</script>

<style lang="css">

</style>

发送JSON请求

this.$axios.post('https://httpbin.org/post', {name: '临渊', age: '18', sex: '男'})

或

this.$axios({
      method: 'post',
      url: 'https://httpbin.org/post',
      data: {name: '临渊', age: '18', sex: '男'} 
    })

全局的axios默认值

main.js中, ​​Vue.prototype.$axios = Axios;​​后

Axios.defaults.baseURL = 'http://127.0.0.1:5000';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Axios.defaults.headers.comont['Authorization'] = AUTH_TOKEN;

15. Vue-axios全局配置与拦截器

全局默认配置

在src/main.js可以添加Axios的全局配置，如

Axios.defaults.baseURL = 'https://httpbin.org';
axios.defaults.headers.common['Authorization'] = '123';
Axios.defaults.headers.post['x-test'] = 'abc';

拦截器

在发送发送请求前或接收响应后执行指定函数。
在src/main.js中添加

  • 拦截请求：Axios.interceptors.request.use(function(config){})
  • 拦截响应：Axios.interceptors.response.use(function(response){})

例如：

// 添加请求拦截器
Axios.interceptors.request.use(function(config) {
    if (config.method == "post") {
        config.data = qs.stringify(config.data);  //将所有post对象转为表单格式
    }
    return config;

}, function(error) {
    //对请求错误做些什么
    return Promise.reject(error);

});

// 添加响应拦截器
Axios.interceptors.response.use(function(response) {
    return response;

}, function(error){
    //对响应错误做点什么
    return Promist.reject(error);
}
)

示例：
src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import Axios from 'axios'  // 导入

import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示

Vue.prototype.$axios = Axios  // 挂载到原型的$axios上

Axios.defaults.baseURL = 'https://httpbin.org';
Axios.defaults.headers.post['x-test'] = 'abc'


Axios.interceptors.request.use(function(config){
    console.log(config);
    return config
})

Axios.interceptors.response.use(function(response){
    console.log(response);
    return response
})

/* eslint-disable no-new */
new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件
})

src/App.vue

<template>
  <div id="app">
    {{ data }}
  </div>
</template>

<script>
import qs from "qs"
export default {
  name: 'App',
  data(){
    return {
      data: {}
    }
  },
  created(){
    this.$axios({
      method: 'post',
      url: '/post',
      data: 'name=临渊&age=18' 
    })
    .then(res=> { this.data=res.data })
    .catch(error=> { console.log(error) })

  }
}
</script>

<style lang="css">
</style>

16. Vue-axios跨域处理

调试时如何使用数据

使用mock模拟数据

  1. 自己创建JSON文件, 使用get请求形式访问数据
  1. 优点: 方便,快捷
  2. 缺点: 只能存在get请求
  1. 项目中集成服务器, 模拟各种接口
  1. 优点: 模拟真实线上环境
  2. 缺点: 增加开发成本
  1. 直接使用线上数据
  1. 优点: 使用
  2. 不一定每个项目都存在

使用后端接口

如使用Axios直接请求

created(){
    this.$axios.get('http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0')
    .then(res=> { this.data=res.data })
    .catch(error=> { console.log(error) })
  }

Chrome Console面板会报跨域错误，如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

需要解决跨域问题，解决方式，使用Nodejs后端服务作为请求中转来解决跨域问题，方式如下：

  1. 修改config/index.js文件dev端的proxyTable（只对开发环境生效），添加api配置，并重启（修改配置后需要重启才能生效）

// 解决跨域问题
    proxyTable:{
        "/api": {
            target: "http://tingapi.ting.baidu.com",
            changeOrigin: true,
            pathRewrite: {
                "^/api": ""
            }
        }
    },

  1. src/main.js中读取配置并绑定到原型的HOST属性上
    ​​​Vue.prototype.HOST = '/api';​​
  2. 组件中重新组装url
    ​​​var url = this.HOST + "v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0";​​

示例：
config/index.js

...
module.exports = {
  dev: {
    ...
    proxyTable: {
        '/api': {
            target: "http://tingapi.ting.baidu.com",
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    },
    ...

src/main.js

import Vue from 'vue'
import Axios from 'axios'  // 导入Axios
import App from './App'

Vue.config.productionTip = false  // 生产环境配置提示
Vue.prototype.$axios = Axios  // 挂载到原型的$axios上
Vue.prototype.HOST = {baiduting: '/api'}  // 支持绑定多个
new Vue({
  el: '#app',  // 绑定根视图
  components: { App },  // 加载组件
  template: '<App/>'  // 使用组件
})

src/App.vue

<template>
  <div id="app">
    <h2>最火歌曲</h2>
    <ul>
      <li v-for="(item,index) in songList">{{ index + 1 }}. {{ item.author }} - {{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
import qs from "qs"
export default {
  name: 'App',
  data(){
    return {
      songList: []
    }
  },
  created(){
    var url = this.HOST.baiduting + '/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0'
    this.$axios.get(url)
    .then(res=> { this.songList=res.data.song_list })
    .catch(error=> { console.log(error) })
  }
}
</script>
<style lang="css">
</style>

17. Vue操作原始DOM

Vue直接操作原始DOM（不推荐）

  • template中节点使用​​ref="名称"​​绑定
  • scripts中使用​​this.$refs.名称​​来引用节点

示例：
src/App.vue

<template>
  <div id="app">
    <p ref="myp">哈哈</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
    }
  },
  mounted(){
    console.log(this.$refs.myp.innerHTML='嘿嘿');
    console.log(this.$refs.myp.style.color='red');
    this.$refs.myp.addEventListener("click", function(){console.log('clicked');})  // 添加时间
  }
}
</script>
<style lang="css">
</style>

使用jQuery操作DOM

（1）安装jQuery ​​cnpm install --save jquery​​​，重启项目
（2）组件中引入jQuery ​​​import $ from "jquery"​​​ （3）组件中使用 ​​$('#myp').css("color", "red")​​

示例：
src/App.vue

<template>
  <div id="app">
    <p id="myp">哈哈</p>
  </div>
</template>
<script>
import $ from "jquery"
export default {
  name: 'App',
  data(){
    return {
    }
  },
  mounted(){
    $('#myp').css("color", "red");
  }
}
</script>
<style lang="css">
</style>



举报

相关推荐

Vue学习笔记：路由开发 Part 03

VuerouterVue.js前端开发

Vue.js学习笔记 03、Vue样式篇

vue.jsjavascript前端css数组Linux系统/运维

Vue学习笔记：Vuex Part03 Action

vuexactionVue.js前端开发

【学习笔记03】

java

【学习笔记】Axios、Promise

linuxc++

【vue学习记录】复用axios

vue.js

Docker学习笔记03

docker运维

Kubernetes学习笔记03

Kubernetesk8s安装运维

docker学习笔记03

docker运维

【学习笔记03】SpringMVC

学习javarestful
0 条评论
加载失败