博客
关于我
Vue中axios的使用
阅读量:266 次
发布时间:2019-03-01

本文共 3164 字,大约阅读时间需要 10 分钟。

axios

1. axios框架的基本使用

  • 安装并导入

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhinhfKm-1616674947133)(E:\学习笔记\图片\image-20201213163546979.png)]

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})

2. axios发送并发

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})//2.axios发送并发请求axios.all([axios({     url: 'http://123.207.32.32:8000/home/multidata'}),axios({     url: 'http://123.207.32.32:8000/home/data',  params: {       type: 'sell',    page: 5  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })const obj= {     name: 'kobe',  age: 12}const {   name,age}=objconst names=['qqq','www','eee']const name1=names[0]const name1=names[1]const name1=names[2]const [name1,name2,name3]=names

3. axios的配置信息相关

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWgHRtvM-1616674947136)(E:\学习笔记\图片\image-20201213175731891.png)]

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')// axios({   //   url: 'http://123.207.32.32:8000/home/data',//   //专门针对get请求的参数拼接//   params: {   //     type: 'pop',//     page: 1//   },//   methods: 'get'// }).then(res => {   //   console.log(res)// })//// axios({   //   url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',//   methods: 'get'// }).then(res=>{   //   console.log(res);// })axios.defaults.baseURL= 'http://123.207.32.32:8000'//2.axios发送并发请求axios.all([axios({     url: '/home/multidata'}),axios({     url: '/home/data',  params: {       type: 'pop',    page: 1  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })

4. axios拦截器的使用

import axios from "axios";export function request(config,success,failure) {       //1.创建axios实例    const instance= axios.create({           baseURL: 'http://123.207.32.32:8000',        timeout: 5000    })    //2.axios的拦截器    //2.1 请求拦截的作用    instance.interceptors.request.use(config => {           console.log(config);        //1.比如config中的一些信息不符合服务器的要求        //2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标        //3.某些网络请求(比如登录token)必须携带一些特殊的信息        return config    },error => {           console.log(err);    })    //2.2 响应拦截    instance.interceptors.response.use(res => {           console.log(res);    },err => {           console.log(err);    })    //3.发送真正的网络请求    instance(config)        .then(res=>{               success(res);        })        .catch(err => {               failure(err)        })}

转载地址:http://zfox.baihongyu.com/

你可能感兴趣的文章
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>
Metasploit CGI网关接口渗透测试实战
查看>>
Metasploit Web服务器渗透测试实战
查看>>
MFC模态对话框和非模态对话框
查看>>
Moment.js常见用法总结
查看>>
MongoDB出现Error parsing command line: unrecognised option ‘--fork‘ 的解决方法
查看>>
mxGraph改变图形大小重置overlay位置
查看>>
MongoDB可视化客户端管理工具之NoSQLbooster4mongo
查看>>
Mongodb学习总结(1)——常用NoSql数据库比较
查看>>
MongoDB学习笔记(8)--索引及优化索引
查看>>
mongodb定时备份数据库
查看>>
mppt算法详解-ChatGPT4o作答
查看>>
mpvue的使用(一)必要的开发环境
查看>>
MQ 重复消费如何解决?
查看>>
mqtt broker服务端
查看>>
MQTT 保留消息
查看>>